SVG Text Animation | Faisal Husain

Ok lets create this cool effect

Now this effect is created in two parts:

Creating SVG from figma
Animating the SVG

Step 1 : Creating SVG from figma

Open figma and create a text.
Export the text as SVG.

That's it for the first part.

Step 2 : Animating the SVG

Create a new file SVGImage.tsx and paste the following code:

const SVGImage = () => {
  return (
    <div
      id="svgText"> 
      <svg
        width="295"
        height="71"
        viewBox="0 0 295 71"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M8.952 70H0.312V1.456H38.616V9.04H8.952V33.328H36.792V40.912H8.952V70ZM91.2263 70L82.9703 48.784H55.8023L47.6423 70H38.9062L65.6903 1.168H73.4663L100.154 70H91.2263ZM72.6983 20.368C72.5063 19.856 72.1863 18.928 71.7383 17.584C71.2903 16.24 70.8423 14.864 70.3943 13.456C70.0103 11.984 69.6903 10.864 69.4343 10.096C69.1143 11.376 68.7623 12.688 68.3783 14.032C68.0583 15.312 67.7063 16.496 67.3223 17.584C67.0023 18.672 66.7143 19.6 66.4583 20.368L58.6823 41.104H80.3783L72.6983 20.368ZM128.827 70H104.059V65.008L112.123 63.184V8.368L104.059 6.44799V1.456H128.827V6.44799L120.763 8.368V63.184L128.827 65.008V70ZM180.942 51.664C180.942 55.76 179.95 59.248 177.966 62.128C175.982 64.944 173.134 67.12 169.422 68.656C165.774 70.192 161.454 70.96 156.462 70.96C153.902 70.96 151.438 70.832 149.07 70.576C146.766 70.32 144.654 69.968 142.734 69.52C140.814 69.008 139.118 68.4 137.646 67.696V59.44C139.95 60.464 142.798 61.392 146.19 62.224C149.646 63.056 153.198 63.472 156.846 63.472C160.238 63.472 163.086 63.024 165.39 62.128C167.694 61.232 169.422 59.952 170.574 58.288C171.726 56.624 172.302 54.672 172.302 52.432C172.302 50.192 171.822 48.304 170.862 46.768C169.902 45.232 168.238 43.824 165.87 42.544C163.566 41.2 160.334 39.792 156.174 38.32C153.23 37.232 150.638 36.08 148.398 34.864C146.222 33.584 144.398 32.144 142.926 30.544C141.454 28.944 140.334 27.12 139.566 25.072C138.862 23.024 138.51 20.656 138.51 17.968C138.51 14.32 139.438 11.216 141.294 8.65599C143.15 6.032 145.71 4.016 148.974 2.608C152.302 1.2 156.11 0.495996 160.398 0.495996C164.174 0.495996 167.63 0.847996 170.766 1.55199C173.902 2.256 176.75 3.184 179.31 4.336L176.622 11.728C174.254 10.704 171.662 9.84 168.846 9.136C166.094 8.432 163.214 8.08 160.206 8.08C157.326 8.08 154.926 8.496 153.006 9.328C151.086 10.16 149.646 11.344 148.686 12.88C147.726 14.352 147.246 16.08 147.246 18.064C147.246 20.368 147.726 22.288 148.686 23.824C149.646 25.36 151.214 26.736 153.39 27.952C155.566 29.168 158.51 30.48 162.222 31.888C166.254 33.36 169.646 34.96 172.398 36.688C175.214 38.352 177.326 40.368 178.734 42.736C180.206 45.104 180.942 48.08 180.942 51.664ZM237.758 70L229.502 48.784H202.334L194.174 70H185.438L212.222 1.168H219.998L246.686 70H237.758ZM219.23 20.368C219.038 19.856 218.718 18.928 218.27 17.584C217.822 16.24 217.374 14.864 216.926 13.456C216.542 11.984 216.222 10.864 215.966 10.096C215.646 11.376 215.294 12.688 214.91 14.032C214.59 15.312 214.238 16.496 213.854 17.584C213.534 18.672 213.246 19.6 212.99 20.368L205.214 41.104H226.91L219.23 20.368ZM256.062 70V1.456H264.702V62.32H294.654V70H256.062Z"
          fill="white"
        />
      </svg>
    </div>
  )
}
export default SVGImage

I have added my name in the SVG you can replace it with your name.

ok before the code lets understand how this animation works.

The code for animation looks like this:

#svgText > svg > path {
  fill: transparent;
  stroke: #fff;
  stroke-width: 1.5;
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  animation: textAnimation 3s ease-in-out forwards;
}
 
@keyframes textAnimation {
  0% {
    stroke-dashoffset: 1600;
    fill: transparent;
  }
  70% {
    fill: transparent;
  }
  100% {
    fill: white;
    stroke-dashoffset: 0;
  }
}

So lets break it down:

We mainly manipulate two properties:

stroke-dasharray : This property creates a dashed line effect. The value of this property is the length of the path.
fill : This property fills the path with color.

Control Panel

Stroke Dash Offset

Fill Opacity

So here we you see the path length is about 1664.24 something something. For your svg it will be different. So you have to find that out. You can get it by putting random number in stroke-dasharray and see how it looks. Then adjust it accordingly.Untill its get disappeared keep increasing the value.

That's it for the animation part.

Now by combining both the parts we get the final effect.

Thanks for reading.