Chris Gannon

Motion & Interaction Designer

@chrisgannon

codepen.io/chrisgannon

A More Holistic Approach To SVG

THIS IS my

svg workflow

+

low hanging fruit

Digital Icon Pack

by Seth Eckert

http://bitbuilds.com/​

Lovely!

Lovely! But

too difficult :(

Lovely!

low hanging fruit

Arcs

by Jeroen

http://codepen.io/jeroens

Super!

10% chunk

drawSVG:"20% 30%"

10% chunk

drawSVG:"60% 70%"

Mountain Graph

by Seth Eckert

http://setheckert.com

Lovely!

Too difficult :(

X-ray me (SVG Experiment)

by Noel Delgado

http://codepen.io/noeldelgado/

Tips and Tricks

Draw everything and reveal the bits

SVG text animation performance sucks

<clip-path> performance is better than <mask>

Apply clips/masks to a parent group

Gem Comet

by Sara Farnsworth

https://dribbble.com/sarafarnsworth

Lovely!

Lovely!

Lovely!

Lovely but too difficult :(

Rocket Ship Banner

by aepicos

http://codepen.io/aepicos

Lovely!

X

Too many anchor points

<use> element 

Stolen!

Stolen!

Redrawn/stolen!

Googled/stolen!

My design based on NASA logo

low hanging fruit

(Lots of bits of)

Tips and Tricks

Set the source for <use> elements at 0,0

cloneNode has more flexibility than <use>

Clean up unnecessary anchor points

Use separate groups for masks and filters

High hanging fruit! 

(FOR ME ANYWAY)

Tips and Tricks

ScrubGSAPTimeline.js

Separate nested groups for independent motion

Use filters sparingly

Introducing animation randomness adds value

The Trick Box

Chris Gannon

@chrisgannon

codepen.io/chrisgannon

SVG Summit

By Chris Gannon

SVG Summit

A More Holistic Approach to SVG

  • 3,834
Loading comments...

More from Chris Gannon