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.
(tech heavy, check the codepen!)
Will look at SVG, inline SVG, elements and attributes of SVG, styling them with CSSand animating 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:
- created a graphic with three paths that are the ‘rails’
- use stoke-dasharray and stroke-dashoffset to animate ‘lines’ along those ‘rails’
- 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.