Creating an Animated Valentine's Day Card with Snap.svg

Originally published at: http://www.sitepoint.com/creating-animated-valentines-day-card-snap-svg/

Last year I showed you how to create an resolution independant infographic with Snap.svg library. Snap is a JavaScript library designed to make it easy to work with SVG.

While we obtained a good result, our creation was mostly a static drawing without any real bells and whistles.

Today I'm going to show you how to achieve some cool effects and animations while we create an animated SVG Valentine's Day love card. You'll also learn how to incorporate Google's web fonts as well your SVG drawings and some advanced text manipulations.

While it’s relatively simple to create static SVG in a host of graphics programs, Snap.svg is one of the best ways to create dynamic, interactive SVGs. We will cover some techniques that you should be able to apply to many different applications.

Let's get started.

First, open up your favorite editor and create a new HTML document. Then we add references for two of the Google's web fonts and for the Snap.svg library.

We'll do this by putting the next 3 lines inside the head tag. This sets up Snap for us and includes a couple of Google Fonts.

<link href='http://fonts.googleapis.com/css?family=Niconne' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js">
</script>

Now, inside the body tag, we create a script tag and put the following code in it:

window.onload = function () {

var card = Snap(600, 400);
}

The windows.onload function makes sure that the page is fully loaded before executing any JavaScript. The card variable represents our SVG canvas with width and height set to 600 and 400 pixels.

	<!-- SVG Heart Shape -->
&lt;svg version=&quot;1.1&quot; id=&quot;heart&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; x=&quot;0px&quot; y=&quot;0px&quot;
     width=&quot;300px&quot; height=&quot;200px&quot; viewBox=&quot;0 0 300 200&quot; enable-background=&quot;new 0 0 300 200&quot; xml:space=&quot;preserve&quot;&gt;
&lt;path fill-rule=&quot;evenodd&quot; clip-rule=&quot;evenodd&quot; fill=&quot;none&quot; d=&quot;M149.95,43.749C111.115-25.583,0.729-9.406,0.002,71.063
    c-0.402,44.195,52.563,60.716,87.829,78.384c34.196,17.135,58.534,40.574,62.347,50.553c3.266-9.777,30.373-33.88,62.028-51.032
    c34.612-18.755,88.231-34.189,87.829-78.385C299.304-10.087,186.998-22.818,149.95,43.749z&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;

Next, we put the above raw SVG code below the script tag. This is a SVG path for the heart shape which we'll use a bit later. I used Inkscape to create the path data. Then, we move back inside the script tag and place the following lines of code below the card variable.

// Utilities

    var dropShadow = card.paper.filter(Snap.filter.shadow(0, 2, 3))

    var bgGradient = card.paper.gradient("r(0.5, 0.5, 0.5)#EE2C34-#821D2D");
    var barGradient = card.paper.gradient("l(0, 0.5, 1, 0.5)#00ADEF-#EC008B:75");

These are some utilities: a drop shadow filter and two gradients (one radial and one linear). We'll need them throughout the code below.

Now, we are ready to start building the actual card. We begin by adding a warm red sunburst background.

    // Card's Background

    var background = card.paper.rect(0, 0, 600, 400).attr({fill: bgGradient, stroke: "none"})

    var rays = card.circle(300, 200, 300).attr({
      fill: "none",
      stroke: "red",
      strokeWidth: 580,
      strokeDasharray: "20 20",
      opacity: 0.2
    });

We create a rectangle and fill it with our already defined radial gradient. The next thing we want to make is a bunch of rays spreading out from the center of the card. This seems tricky, but thanks to a small stroke trick we'll achieve that effect pretty easily.

First, we create a circle with red stroke and fill set to "none", and then, to mimic the effect of rays, we set strokeWidth to be extremely tick (filling the whole canvas) and give the strokeDasharray attribute a value of "20 20" (resulting in a dashed line).

OK. The stage is now set! Let's add the actors.

Continue reading this article on SitePoint

Looks nice, but holy crap is it laggy!
At least in Firefox.

I made the mistake of opening the code pen in a new tab, so I had two of them running, and I was just barely able to kill the tabs and get the browser usable again.

Lags on all browsers if you open more than one tab. IE, Chrome, FF…

nice.!

It’s a good post :smiley: . I was a little helped by this coding.
Thanks