Candy Crush style bouncy buttons in SVG

This tutorial will guide you step-by-step to produce those cute bouncy Candy Crush buttons in SVG. If you want more explanation on any particular aspect of SVG try this great SVG tutorial.

Lets start with the basics; a retangle and some text. We anchor the text in the center so label changes do not require text re-alignment. The font is simple Arial. You can use Google Fonts or Adobe TypeKit to get more exotic fonts but that will have to wait for a future tutorial.

See the Pen nItgx by Craig Mandsager (@genolve) on CodePen.

 

Let’s add some depth by adding drop-shadows and bevel-emboss. Both of these are achieved with the somewhat complex filter functions. Once you get the filter set up you can use it on any shape by referencing its ID (e.g. filter="url(#bevel_filter)"). We won’t dive into filters now but here is an advanced discussion on filters. For the text we want a really tight dropshadow so instead of using another filter we’ll duplicate the text, change the color black and shift it down and right 1 pixel. Finally let’s round out the corners of the rectangle with rx="10" ry="10". Here is the new SVG:

 

See the Pen xbJFf by Craig Mandsager (@genolve) on CodePen.

 

Now the animation. We want the buttons to bounce; that is squish in then out like a square of jello. There a number of ways to go about this but the most elegant is an animated scale transform on the whole group (the <g> tag ) which will scale both the text and the rectangle at the same time. To make the transform symetric, move the entire button so it is centered over point (0,0). If you ever have to deal with rotation transforms this trick really saves your sanity. To smooth it out use an ease-in ease-out keyspline. You can find more on keysplines in this advanced discussion of SVG animations. Finally, we’ll add a link to the button; SVG links are very similar to HTML links. Here is the final version released under MIT license. You can evolve this button further on Genolve just click the button:

 

See the Pen gKvCI by Craig Mandsager (@genolve) on CodePen.

 

The animation portion that was added above:

<animateTransform
attributeName="transform"
calcMode="spline"
type="scale"
values="1.02,.98; .98,1.02; 1.02,.98"
keyTimes="0;.5;1"
keySplines="0.4 0 .6 1;.4 0 0.6 1"
dur="1.2s"
repeatCount="indefinite"
></animateTransform>

 

So we have a nice animated button but now for the bad news; it doesn’t work well in all browsers:

Firefox v28 Chrome v34 Internet Explorer v11 Safari iOS 7.1.2
great! jerky no animation super slow

Comments are closed