Soy nuevo en SVG y estoy tratando de animar estos objetos con CSS.

Estaba leyendo algo de documentación pero no he logrado nada.

Tuve otroidea: "Divide el objeto en partes más pequeñas, exporta todas esas partes en svg, y luego con CSS ve mostrando las partes del objeto hasta que esté completo"

Pero antes de intentar eso quería pedir ayuda.

Esto es lo que estaba tratando de hacer (obviamente, esta debe ser una animación fluida):

Aquí están los 2 ejemplos que estaba tratando de animar. Creo que el más complicado es el de la izquierda.

<div class="demo">
  <svg class="progress"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 209.29 106.77">
    <defs>
        <style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill-rule:evenodd;fill:url(#linear-gradient-2);}</style>
        <linearGradient id="linear-gradient" x1="208.06" y1="15.09" x2="148.49" y2="88.62" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#bababa"/>
            <stop offset="0.28" stop-color="#979797"/>
            <stop offset="1" stop-color="#424242"/>
        </linearGradient>
        <linearGradient id="linear-gradient-2" x1="12.55" y1="97.95" x2="78.02" y2="26.75" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#4682b4"/>
            <stop offset="1" stop-color="#002e6e"/>
        </linearGradient>
    </defs>
    <g id="c2" data-name="c2">
        <g id="Layer_1" data-name="Layer 1">
            <path class="cls-1" d="M135.21,71.21,130,76.3a52.67,52.67,0,0,0,9.56,8.58l1.43-1.76L208.64,0ZM160.15,89.3,158,93a52.93,52.93,0,0,0,14.44,1.23l.55-1.38L209.29,3.59Z"/>
            <path class="cls-2" d="M24.42,9.83A52.69,52.69,0,0,0,8.24,82.57a51.86,51.86,0,0,0,3.65,5l5.16-5,.15-.15c-.68-.92-1.35-1.87-2-2.85a49.58,49.58,0,0,1,65.44-70A52.71,52.71,0,0,0,24.42,9.83Zm59,84.7a49.52,49.52,0,0,1-24.12,7.71l-1.61,4-.24.58A52.67,52.67,0,0,0,101.3,74.63,49.52,49.52,0,0,1,83.4,94.53Z"/>
        </g>
    </g>
  </svg>
</div>