Initially we all were using images to display logo and site name in our web applications. But nothing is constant in this world. So we moved from images to Scalable Vector Graphics (SVG).
SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and compressed. As XML files, SVG images can be created and edited with any text editor, as well as with drawing software.
The true value of SVG is it solves many of the most vexing problems in modern web development. Let’s see typing animation with SVG.
<link href=”https://fonts.googleapis.com/css?family=Iceberg” rel=”stylesheet”>
<svg viewBox=”0 0 210 297″ >
<animate attributeName=”d” from=”m0,110 h0″ to=”m0,110 h1100″ dur=”20s” begin=”0s” repeatCount=”indefinite”/>
<text font-size=”15″ font-family=”Iceberg” fill=’hsla(36, 95%, 85%, 1)’ x=”20″>
<textPath xlink:href=”#path”>Eat • Sleep • Code • Repeat
background:hsla(0, 5%, 5%, 1);
background-image:linear-gradient(to right top, #a73737, #7a2828);
Above code will display the out as below. Just try this code and observe the output. Happy coding !!!