Teochew Thunder: Web Tutorial: Animated CNY SVG

Squeak!

The Year of the Rat is upon us, and I'm still high on the buzz of playing with Scalable Vector Graphics, otherwise known as SVGs. In fact, today I want to introduce another concept in SVG animation - timed animations!

Sure, all animations are timed one way or another, but what if you needed a sequence of one-time animations? Like the one below. (refresh this page if you want to view it again)

The letters "2020" moved and morphed into a stylized rat head. Awesome, right?! I'm going to show you how to get this done.

First, we'll need a HTML page with an orange background. For good measure, set default font size too.

<!DOCTYPE html>
<html>
    <head>
        <title>CNY 2020</title>

        <style>
            body
            {
                background-color: #FF4400;
                font-size: 10px;
            }
        </style>
    </head>

    <body>

    </body>
</html>

Then we need to have a div to contain the SVG. Give it an id of svgContainer. Let's make it 800 by 400 pixels, and give it a red border and align it middle of the screen.

<!DOCTYPE html>
<html>
    <head>
        <title>CNY 2020</title>

        <style>
            body
            {
                background-color: #FF4400;
                font-size: 10px;
            }

            #svgContainer
            {
                width: 800px;
                height: 400px;
                margin: 10% auto 0 auto;
                outline: 1px solid #FF0000;
            }
        </style>
    </head>

    <body>
        <div id="svgContainer">

        </div>
    </body>
</html>

Great, here we go!

Next up is the SVG itself. It should go inside the container.

The next tricky bit is the "2020". We need to animate this sucker later, so we can't use text. We need to draw it out. First, add this into the CSS, so the lines we draw will be nice, thick and red.

The "0"s are easy enough - just use ellipses! Make them tall, and spread them out to make room for the "2"s.

Like I said - easy.

Each "2" will use a horizontal straight line...

Do you see it taking shape?

And now let's have a vertical line, using a path tag instead of a line tag. Each path goes 200 pixels vertically down from the origin point.

"LOLO"? Patience, we'll get there!

Let's apply a curve to the paths. The curves will pull the path 200 pixels to the right, and occur 75 pixels down.

Presto! Two "2"s! Here's your "2020".

Time to animate!

Of all the digits, only the second "2" will be mostly stationary. For starters, let's rotate the first "2". Add an animate tag within the path tag which defines the curve of the "2". Give it an id of animateFlipCurve.

What we're going to animate is the d attribute. While the origin point and end point remains the same, the curve now goes negative 200 pixels horizontally.

The fill attribute, set to "freeze", means that the curve is stuck this way after the current animation ends. Set it to begin after 2 seconds, by setting the begin attribute. Set the duration to half a second, and ensure that it runs only once by setting the repeatCount property.

Let's take a look. Does the first "2" change shape after two seconds?

Now that we've flipped the curve, we want to move it horizontally so that it forms the rat's head with the second "2". For this, we use the animateMotion tag. Give it an id of animateMoveCurve.

Now, set the dur and fill attributes.

Ensure that this only starts moving after the curve is flipped, by setting the begin attribute. animateFlipCurve is the animation object to take reference form, and we use its end property here.

Next, we'll want to define the path upon which the curve will travel. (0, 0) is the origin and the next point is (250, 0) that means that the curve will travel 20 pixels right.

Kind of messy, but it's working!

Now, we want the horizontal base of the "2" to move with the curve, right? So we add an animateMotion tag within the line tag. The begin, dur and fill attributes will mirror those of animateMoveCurve. This does not equire an id because no other animation will take reference from this one.

The path here means that the line will travel 160 pixels to the right.

Do you see it?

Moving the "0"s to form the ears

This will be comparatively easy. In the first ellipse create two animate tags. The first one has an id of animateEllipseSize1 (because another animation will take reference from it soon) and the second will have no id. They will effectively resize the ellipse will modifying the ry and rx attributes of the ellipse to 70 pixels. Both will be set to begin after the animateFlipCurve animation ends. As with the rest, set the fill attribute to "freeze" and also set the dur and repeatCount attributes.

Do the same for the other ellipse. Only, the id should be set to animateEllipseSize2.

Try it. Did the "0"s become circles?

So now that both ellipses have been resized, let's move them to form ears! Add two more animate tags inside the first ellipse. They will both take reference from animateEllipseSize1, beginning only when it ends. Then modify the cy and cx attributes to move the ellipse towards the top left till it aligns neatly to the side of the "rat head". You may need to engage in a bit of trial and error here.

Lovely!

Do the same for the other ellipse. The new animation tags should take reference from animateEllipseSize2 instead. Again, adjust the animation as you see fit.

Looks good!

The whiskers

We're coming to the most complicated part of this tutorial. Here, we want each line to split into three and form "whiskers". What we're going to do is create copies of each line, like so. For the first line, copy even the animations! You should not see anything upon refreshing. That's because all these lines have the exact same properties and are overlapping each other perfectly, even during the animation.

OK, the idea here is for each of these copied line tags to thin, then rotate. Add one animate tag and one animateTransform tag within each line tag, and set them to take reference from animateMoveCurve, beginning the animation only when animateMoveCurve ends. Also set fill, dur and repeatCount attributes.

For each line tag, the second animation changes the stroke-width attribute from 3em to 1em. That's pretty straightforward.

The third animation rotates the line. We set the attributeName attribute to "transform" and the type attribute to "rotate". The from and to attribues each are a series of three numbers. The first number is the angle in which to rotate by. The second and third numbers are the point of origin of the rotation. We want that point of origin to be the far right of the lines, which is, if you use the x2 and y2 attributes, (250, 300). Note that the first line is rotated by negative 5 degrees, the second line is rotated by negative 15 degrees, and the third by negative 25 degrees.

Aha!

Now let's repeat for the other three lines, but in reverse! Instead of the point of origin being the right end, make it the left end!

And there's your rat head.

Finishing up...

Modify svgContainer to remove the red outline. Also, add some styling for text tag.

#svgContainer
{
    width: 800px;
    height: 400px;
    margin: 10% auto 0 auto;
    outline: 0px solid #FF0000;
}

svg
{
    width: 800px;
    height: 400px;
}

line, ellipse, path, text
{
    stroke-width: 3em;
    stroke: rgba(255, 0, 0, 1);
    fill: none;
}

text
{
    stroke-width: 1px;
    fill: rgba(255, 0, 0, 1);
    font: bold 40px arial;
}

When you're done, add some text at the end of the svg object.

<ellipse cx="615" cy="200" rx="40" ry="100">
    <animate
        id="animateEllipseSize2"
        attributeName="ry"
        from="100"
        to="70"
        fill="freeze"
        begin="animateFlipCurve.end"
        dur="0.5s"
        repeatCount="1"
    />

    <animate
        attributeName="rx"
        from="40"
        to="70"
        fill="freeze"
        begin="animateFlipCurve.end"
        dur="0.5s"
        repeatCount="1"
    />

    <animate
        attributeName="cy"
        from="200"
        to="100"
        fill="freeze"
        begin="animateEllipseSize2.end"
        dur="0.5s"
        repeatCount="1"
    />

    <animate
        attributeName="cx"
        from="615"
        to="565"
        fill="freeze"
        begin="animateEllipseSize2.end"
        dur="0.5s"
        repeatCount="1"
    />
</ellipse>

<text x="150" y="400">
    HAPPY YEAR OF THE RAT
</text>

Adjust as necessary!

That's it, we're done...

That was fun. And hopefully, that's just a prelude to the awesomeness that will be The Year of The Rat!

Wishing you an enor-mouse-ly auspicious Lunar New Year!
T___T

Teochew Thunder

Pages

Wednesday, 22 January 2020

Web Tutorial: Animated CNY SVG

Time to animate!

Moving the "0"s to form the ears

The whiskers

Finishing up...

That's it, we're done...

No comments:

Post a Comment

Teochew Thunder

Upcoming Web Tutorials

Features

Reviews