Typing animation with SVG

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 searchedindexedscripted, and compressed. As XML files, SVG images can be created and edited with any text editor, as well as with drawing software.

Why SVG?

SVG is an W3C standard, which means it can inter-operate easily with other open standard languages and technologies including JavaScript, DOM, CSS, and HTML. As long as the W3C sets the global industry standards, it seems likely SVG will continue to be the de-facto standard for vector graphics in the browser.

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.

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Typing Animation[SVG]</title>
            <link href=”https://fonts.googleapis.com/css?family=Iceberg&#8221; rel=”stylesheet”>
    </head>
    <body>
        <svg viewBox=”0 0 210 297″ >
<path id=”path”>
        <animate attributeName=”d” from=”m0,110 h0″ to=”m0,110 h1100″ dur=”20s” begin=”0s” repeatCount=”indefinite”/>
    </path>
    <text font-size=”15″ font-family=”Iceberg” fill=’hsla(36, 95%, 85%, 1)’ x=”20″>
        <textPath xlink:href=”#path”>Eat &bull; Sleep &bull; Code &bull; Repeat
    </textPath>
    </text>
</svg>
    </body>
</html>

CSS

body{
  background:hsla(0, 5%, 5%, 1);
  background-image:linear-gradient(to right top, #a73737, #7a2828);
}
svg{
  width:100%;
  height:115vh;
}

Above code will display the out as below. Just try this code and observe the output. Happy coding !!!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s