Teochew Thunder: Web Tutorial: Valentine's Day Animated SVG

Valentine's Day is here in a couple days. As tradition demands, I've got a nice web tutorial for an animated SVG.

We begin with some boilerplate HTML with an SVG parked in the middle. The div has been given a red outline because the boundary will be important for us to see where things begin and end.

<!DOCTYPE html>
<html>
   <head>
       <title>Happy Valentine's Day!</title>

       <style>
           #svgContainer
           {
               width: 500px;
               margin: 5em auto 0 auto;
        outline: 1px solid red;
           }

           svg
           {
               width: 500px;
               height: 500px;
           }
       </style>
   </head>

   <body>
       <div id="svgContainer">
           <svg>
               SVG not supported
           </svg>
       </div>
   </body>
</html>

Start off with something simple. Two text tags.

Style them here. I'm making them a nice pink.

Nothing too elaborate there.

Let's get to the heart (heh heh) of the matter. We will make an SVG heart using the path tag and some curves. We will preemptively style this to have a black background.

svg
{
   width: 500px;
   height: 500px;
}

.heart
{
   fill: black;
}

.message
{
   fill: rgb(255, 200, 200);
   font: bold 50px verdana;
   textLength: 100%;
}

Now with the d attribute, start in the horizontal middle of the SVG, and maybe a third of the height vertically. Don't forget to style it using the CSS class heart.

Move to the left.

Apply a curve upwards. Vertically, we tug the line upwards by 60 pixels, and horizontally left by 50 pixels.

See where this is going?

Now go back right to the middle, and way down.

The curve is applied. Go left 50 pixels and down 80 pixels. I had to experiment with different values to get it just right.

And we have half a heart!

Move right and up.

The curve to apply here is tricky, and you really have to understand your curves well. You have to tug the line right 150 pixels. And because you're moving from a lower position to a higher position, the vertical offset is negative. Hard for me to explain, but try it yourself!

Three quarters done!

Back to the origin, with one last curve.

Now you got a heart.

Let's fill this in! We want a 3D effect, so we style it with a gradient. The gradient will be called heartGradient.

.heart
{
fill: url('#heartGradient');
}

Start a defs tag and input the gradient here.

It begins with a very light pink, at the top right...

...to red...

...to brown and then dark brown. The percentages ensure that red takes up the majority. Opacity is 1 all the way.

Beautiful!

Now let's apply a shadow. Add an ellipse below the heart. It will be wide and flat, and styled using the shadow CSS class.

The fill will be shadowGradient.

.heart
{
   fill: url('#heartGradient');
}

.shadow
{
   fill: url('#shadowGradient');
}

.message
{
   fill: rgb(255, 200, 200);
   font: bold 50px verdana;
   textLength: 100%;
}

And this gradient is simple - grey to white, but with 0 opacity at the white part.

Here's your shadow!

Now we're going to place circle tags before and after the heart. So some will appear behind and some will appear in front. The CSS class is mote.

All of them will be filled in using moteGradient.

.heart
{
   fill: url('#heartGradient');
}

.shadow
{
   fill: url('#shadowGradient');
}

.message
{
   fill: rgb(255, 200, 200);
   font: bold 50px verdana;
   textLength: 100%;
}

.mote
{
   fill: url('#moteGradient');
}

moteGradient is from pink to white, again with opacity 0 at the white part.

Each of these will have different positions and sizes.

Here's what it should look like now.

Now to animate this shit! The animate tag should be inside each of these. For starters, the repeatCount property should be set to indefinite.

Each of these animations will move the circle upwards. But how far upwards (depending on the to attribute), how long the animation takes and the delay at the start, should all vary.

Remove the red outline.

#svgContainer
{
   width: 500px;
   margin: 5em auto 0 auto;
   outline: 0px solid red;
}

Have you ever seen anything more amazing?!

Love is the answer!

There you go, just a simple web tutorial. But so pretty. I had fun, hope you did too. Now go forth and be romantic, lovebirds!

Heartening, isn't it?
T___T

Teochew Thunder

Pages

Sunday, 12 February 2023

Web Tutorial: Valentine's Day Animated SVG

Love is the answer!

No comments:

Post a Comment

Teochew Thunder

Upcoming Web Tutorials

Features

Reviews