Creative (Yet Still Useful) SVG Animation

Animated effects for the web add a world of difference and delight. Using CSS properties to style SVG makes it fun, simple and easy to engage your audience. So come and join Brett as he lifts the lid on some fantastic web conjuring tricks with SVG. He will show how CSS can be used to style and animate SVG, giving designers an easy way to introduce animation into their websites.

Join in the fun as Brett demonstrates how simple CSS animations can be applied to add style and substance to a page, without having to deal with complicated Javascript animation libraries. Nurture your creative spirit and learn new ways to play your way to design heaven on the web.

(tech heavy, check the codepen!)

Will look at SVG, inline SVG, elements and attributes of SVG, styling them with CSSand animating them.

SVG is awesome because they can scale infinitely. Just as designers needed something to scale up to billboard size, we need things to scale to the viewport. SVGlooks and feels similar to HTML and you can put it directly ‘inline’ in your HTML. You can work with SVG elements the same way as HTML elements – inspect them, style them, use JavaScript on them.

<svg viewbox=”0 0 10 10″></svg>

This sets up a 10×10 grid (0,0 at the top left, 10,10 at the bottom right.

Elements inside the SVG are placed according to that grid – knowing this syntax makes it easy to write SVG by hand… although in most cases you probably will make the original in some kind of software then just tweak it later.

Once an SVG is available inline, you can apply CSS eg. via a class:

<path class=”star” d=”…” />

This is really powerful when you start using animation and transform.

Animating the stroke (border) of SVG elements allows a lot of amazing effects, like loading bars; animated icons; etc.

Creating the animated hamburger:

  1. created a graphic with three paths that are the ‘rails’
  2. use stoke-dasharray and stroke-dashoffset to animate ‘lines’ along those ‘rails’
  3. add some transitions to get easing and control the speed of the three lines

SVG has a lot of advantages including scalability, small file size, ability to make them accessible and so on. There are lots of JS libraries out there to help if you want to use JS; and they provide nice things like easy tweening.

Think of SVG as an extension of HTML which allows you to do more in the browser. It’s easy to read and understand, yet it’s really powerful.