SVG ANIMATION
INTRO TO
WITH A DASH OF
ESPIONAGE & GLENNGOOLIE BLUE
Scalable Vector Graphics
Special DOM element with unique Attributes, Tags, & Behaviors
Can be used inline and manipulated via SMIL, CSS, & JavaScript
Key Benefits
Smaller file sizes than rendered images
Animate individual components
Scale to any resolution without distortion
WHAT IS SVG
Consider iOS retina displays; standard images will distort while SVGs will scale cleanly.
WHAT IS SVG
WHAT IS SVG
31+
31+
9+*
7+*
29+
* CSS transforms on SVG elements are not supported in Internet Explorer, Edge, or Safari.
TRAINING DAY
CSS Shapes
SVG Shapes
www.slides.com/sarasoueidan/building-better-interfaces-with-svg
TRAINING DAY
Basic Shapes & Attributes
<circle>
<elipse>
<line>
<polyline>
<path>
<rect>
<polygon>
<text>
TRAINING DAY
Basic Shapes & Attributes
<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="30" height="30" stroke="white" fill=”none" stroke-width="5"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="white" fill=”none"
stroke-width="5"/>
</svg><svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="75" r="20" stroke="white" fill=”none" stroke-width="5"/>
</svg>TRAINING DAY
Basic Shapes & Attributes
<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="white" stroke-width="5"/>
</svg>
<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text x="10" y="25" transform="rotate(10,10,20)" style="font-family: 'Times New Roman';
font-size: 24px; fill: white;">SVG text styling</text>
</svg>TRAINING DAY
SVG elements are real, searchable, and accessible content.
TRAINING DAY
TRAINING DAY
Exporting SVG Code
The three most popular vector graphics editors are:
- Illustrator
- Inkscape
- Sketch
- Create your graphic
- Save As... .svg
- Select SVG Code
- Copy the exported SVG code
General exporting process:
It's good practice to optimize the exported code.
TRAINING DAY
https://petercollingridge.appspot.com/svg-editor
https://github.com/svg/svgo
https://github.com/sindresorhus/grunt-svgmin
SVG Editor
SVGO
SVGmin - Grunt
THREE TO TANGO
SMIL
|
CSS
JAVASCRIPT
|
SMIL
SVG syntax has an <animate> tag specifically for it, although it's a touch complicated. That's referred to as SMIL (Synchronized Multimedia Integration Language), and SVG expands on that a bit as well.
PROS
Provides an inline animation syntax
Can animate properties that CSS cannot
Decent control over animation triggering/chaining
Arguably has better performance than CSS
CONS
A bit cumbersome to use
Poor IE support
SMIL
SMIL provides tags & attributes to allow control of SVG elements inline.
|
animate |
Allows scalar attributes and properties to be assigned different values over time. |
|
set |
A convenient shorthand for 'animate', which is useful for assigning animation values to non-numeric attributes and properties, such as the 'visibility' property. |
|
animateMotion |
Moves an element along a motion path. |
SMIL
Basic animations with SMIL
<rect x="10" y="10" width="30" height="30" stroke="white" fill="transparent" stroke-width="5">
<animate attributeName="x" dur="1s" to="170" repeatCount="indefinite"/>
</rect><rect x="10" y="10" width="30" height="30" stroke="white" fill="transparent" stroke-width="5">
<animate attributeName="fill" dur="1s" to="red" repeatCount="indefinite"/>
</rect>SMIL
Basic animations with SMIL
<rect x="10" y="10" width="30" height="30" stroke="white" fill="transparent" stroke-width="5">
<animate id="first" attributeName="x" dur="1s" to="100" fill="freeze"/>
<animate id="second" attributeName="y" dur="1s" to="100" begin="first.end" fill="freeze"/>
<animate id="third" attributeName="x" dur="1s" to="10" begin="second.end" fill="freeze"/>
<animate id="fourth" attributeName="y" dur="1s" to="10" begin="third.begin+1s" fill="freeze"/>
</rect>SMIL
SVG also includes the following extensions to SMIL animations
|
animateTransform |
Modifies one of SVG's transformation attributes over time, such as the 'transform' attribute. |
|
path |
SVG allows any feature from SVG's path data syntax to be specified in a 'path' attribute to the 'animateMotion' element. |
|
mpath |
SVG allows an 'animateMotion' element to contain a child 'mpath' element which references an SVG 'path' element as the definition of the motion path. |
|
keyPoints |
SVG adds a 'keyPoints' attribute to the 'animateMotion' to provide precise control of the velocity of motion path animations. |
|
rotate |
SVG adds a 'rotate' attribute to the 'animateMotion' to control whether an object is automatically rotated so that its x-axis points in the same direction (or opposite direction) as the directional tangent vector of the motion path. |
SMIL
Basic animations with SMIL
<rect id="box" x="10" y="10" width="30" height="30" stroke="white" fill="transparent" stroke-width="5"/>
<animateMotion xlink:href="#box" dur="1s" begin="click" fill="freeze" repeatCount="indefinite"
path="M0,0c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3 c13.5,3.5,26.1,9.6,38.5,16.2c12
.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7 c13.7,6.8,26
.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.
5 c1.9-2.1,3.7-5.5,6.5-6.5"/>
SMIL
Basic animations with SMIL
<path fill="transparent" stroke="white" stroke-miterlimit="10" d="M151.235,39.463c0,0,34.782,21.739,0,56.521
c0,0,25.218-22.608,65.218,0c0,0-36.521-36.521,0-56.521C216.453,39.463,181.67,70.768,151.235,39.463z">
<animate id="first" attributeName="d" dur="1s" begin="0s;second.end" fill="freeze"
to="M151.235,39.463c0,0-36.453,27.494,0,56.521
c0,0,30.9,34.451,65.218,0c0,0,28.765-28.261,0-56.521C216.453,39.463,180,16.522,151.235,39.463z"/>
<animate id="second" attributeName="d" dur="1s" begin="first.end" fill="freeze"
to="M151.235,39.463c0,0,34.782,21.739,0,56.521
c0,0,25.218-22.608,65.218,0c0,0-36.521-36.521,0-56.521C216.453,39.463,181.67,70.768,151.235,39.463z"/>
</path>When animating paths, the before and after values must contain the same number of points.
SMIL
THREE TO TANGO
CSS
|
SMIL
JAVASCRIPT
|
CSS
CSS provides great support for SVG tags and attributes to animate.
PROS
Already familiar syntax to handle animation
Better performance than SMIL animations
Great support for a significant amount of SVG attributes
Can be streamlined with the inclusion of Bourbon and Sass/Less
Standard cross-browser support
CONS
Does not cover all SVG attributes like ‘points’ and ‘d’ values
The triggering and chaining capabilities aren’t as robust
Animating transform properties not supported in IE - needs fallback
CSS
CSS Classes can alter SVG elements however dramatically or slightly
<polygon fill="#3B3F40" points="63.65 10257.45 72.8 10259.42 76.65 10257.84 91.81 10257.84 103.48 10252.35 99.48 10245.7 100.35 10241.63 82.9 10236.69"/>
<polygon fill="#242928" points="46.91 10248.77 45.48 10249.52 63.65 10257.45 100.35 10241.63 97.36 10236.62"/>
<polygon fill="#0A0501" points="89.28 10244.99 92.03 10246.13 92.77 10243.5"/>
<polygon fill="#0A0501" points="66.51 10254.44 69.26 10255.58 69.99 10252.94"/>
<polygon fill="#EB3853" points="48.73 10244.8 45.05 10243.25 45.05 10245.94 48.73 10247.49"/>
<polygon fill="#EB3853" points="59.27 10249.26 59.27 10251.95 63.59 10253.77 63.59 10251.08"/>
<polygon fill="#7E217B" points="63.59 10251.08 63.59 10248.71 59.27 10246.89 49.69 10242.84 45.05 10240.88 45.05 10243.25 48.73 10244.8 48.73 10247.49 45.05 10245.94 45.05 10248.33 49.69 10250.3 59.27 10254.35 63.59 10256.17 63.59 10253.77 59.27 10251.95 59.27 10249.26"/>
<polygon fill="#773573" points="49.25 10239.1 67.79 10246.94 63.59 10248.71 45.05 10240.88"/>
<polygon fill="#8a2587" points="54.1 10225.23 49.25 10239.1 67.79 10246.94 72.64 10233.07"/>
<polygon fill="#952797" points="71.1 10218.05 54.1 10225.23 72.64 10233.07 89.64 10225.89"/>
<polygon fill="#491147" points="101.5 10232.69 94.27 10235.75 89.64 10225.89 72.64 10233.07 67.79 10246.94 63.59 10248.71 63.59 10256.17 101.5 10240.14"/>
<polygon fill="#781F73" points="90.69 10228.11 101.5 10232.69 94.27 10235.75"/>
<polygon fill="#005A58" points="83.48 10230.08 88.93 10227.78 92.28 10234.92 83.48 10238.65"/>
<polygon fill="#005A58" points="80.9 10239.69 70.02 10244.29 73.5 10234.35 80.9 10231.22"/>
<polygon fill="#00AEBA" points="54.94 10227.67 51.29 10238.11 66.68 10244.61 70.33 10234.16"/>
<polygon fill="#4F5451" points="72.37 10250.88 72.32 10250.67 72.24 10250.48 72.13 10250.33 72 10250.22 71.85 10250.15 71.68 10250.12 71.5 10250.13 71.32 10250.19 71.13 10250.29 70.95 10250.42 70.78 10250.6 70.63 10250.8 70.5 10251.02 70.39 10251.27 70.31 10251.52 70.26 10251.77 70.25 10252.01 70.26 10252.24 70.31 10252.45 70.39 10252.64 70.5 10252.78 70.63 10252.9 70.78 10252.97 70.95 10253 71.13 10252.99 71.32 10252.93 71.5 10252.83 71.68 10252.69 71.85 10252.52 72 10252.32 72.13 10252.09 72.24 10251.85 72.32 10251.6 72.37 10251.35 72.38 10251.11"/>
<path fill="#4A3F3E" d="M73.42 10250.19l-0.1-0.42 -0.16-0.37 -0.21-0.3 -0.26-0.23 -0.31-0.14 -0.34-0.06 -0.36 0.03 -0.37 0.12 -0.37 0.2 -0.36 0.27 -0.34 0.35 -0.31 0.4 -0.26 0.45 -0.21 0.48 -0.16 0.5 -0.1 0.5 -0.03 0.49 0.03 0.46 0.1 0.42 0.16 0.37 0.22 0.3 0.26 0.23 0.31 0.14 0.34 0.06 0.36-0.03 0.37-0.11 0.37-0.2 0.36-0.28 0.34-0.34 0.31-0.4 0.26-0.45 0.22-0.48 0.16-0.5 0.1-0.5 0.03-0.49L73.42 10250.19zM72.32 10251.6l-0.08 0.25 -0.1 0.24 -0.13 0.23 -0.15 0.2 -0.17 0.17 -0.18 0.14 -0.19 0.1 -0.19 0.06 -0.18 0.01 -0.17-0.03 -0.15-0.07 -0.13-0.11 -0.11-0.15 -0.08-0.18 -0.05-0.21 -0.02-0.23 0.02-0.25 0.05-0.25 0.08-0.25 0.11-0.24 0.13-0.22 0.15-0.2 0.17-0.17 0.18-0.14 0.19-0.1 0.19-0.06 0.18-0.02 0.17 0.03 0.15 0.07 0.13 0.11 0.11 0.15 0.08 0.18 0.05 0.21 0.02 0.23 -0.02 0.24L72.32 10251.6z"/>
<path fill="#0A0501" d="M74.47 10249.51l-0.14-0.63 -0.24-0.55 -0.32-0.45 -0.39-0.34 -0.46-0.22 -0.51-0.09 -0.54 0.04 -0.56 0.17 -0.56 0.3 -0.54 0.41 -0.51 0.52 -0.46 0.6 -0.4 0.67 -0.32 0.72 -0.24 0.75 -0.14 0.75 -0.05 0.73 0.05 0.69 0.14 0.63 0.24 0.55 0.32 0.45 0.4 0.34 0.46 0.22 0.51 0.09 0.54-0.04 0.56-0.17 0.56-0.3 0.54-0.41 0.51-0.52 0.46-0.6 0.4-0.67 0.32-0.72 0.24-0.75 0.14-0.75 0.05-0.73L74.47 10249.51zM73.32 10251.65l-0.16 0.5 -0.21 0.48 -0.26 0.45 -0.31 0.4 -0.34 0.34 -0.36 0.28 -0.37 0.2 -0.37 0.12 -0.36 0.03 -0.34-0.06 -0.31-0.14 -0.26-0.23 -0.21-0.3 -0.16-0.37 -0.1-0.42 -0.03-0.46 0.03-0.49 0.1-0.5 0.16-0.5 0.22-0.48 0.26-0.45 0.31-0.4 0.34-0.35 0.36-0.27 0.37-0.2 0.37-0.11 0.36-0.03 0.34 0.06 0.31 0.14 0.26 0.23 0.22 0.3 0.16 0.37 0.1 0.42 0.03 0.46 -0.03 0.49L73.32 10251.65z"/>
<polygon fill="#4F5451" points="95.14 10241.43 95.09 10241.22 95.01 10241.03 94.91 10240.88 94.78 10240.77 94.62 10240.7 94.45 10240.67 94.27 10240.68 94.09 10240.74 93.9 10240.84 93.72 10240.98 93.56 10241.15 93.4 10241.35 93.27 10241.57 93.16 10241.82 93.09 10242.07 93.04 10242.32 93.02 10242.56 93.04 10242.79 93.09 10243 93.16 10243.19 93.27 10243.33 93.4 10243.45 93.56 10243.52 93.72 10243.55 93.9 10243.54 94.09 10243.48 94.27 10243.38 94.45 10243.24 94.62 10243.07 94.78 10242.87 94.91 10242.64 95.01 10242.4 95.09 10242.16 95.14 10241.9 95.16 10241.66"/>
<path fill="#4A3F3E" d="M96.19 10240.75l-0.1-0.42 -0.15-0.37 -0.22-0.3 -0.26-0.23 -0.3-0.14 -0.34-0.06 -0.36 0.03 -0.37 0.12 -0.37 0.2 -0.36 0.27 -0.34 0.35 -0.31 0.4 -0.26 0.45 -0.21 0.48 -0.16 0.5 -0.1 0.5 -0.03 0.49 0.03 0.46 0.1 0.42 0.16 0.37 0.22 0.3 0.26 0.23 0.31 0.14 0.34 0.06 0.36-0.03 0.37-0.11 0.37-0.2 0.36-0.28 0.34-0.34 0.31-0.4 0.26-0.45 0.22-0.48 0.15-0.5 0.1-0.5 0.03-0.49L96.19 10240.75zM95.09 10242.16l-0.08 0.25 -0.1 0.24 -0.13 0.23 -0.15 0.2 -0.17 0.17 -0.18 0.14 -0.19 0.1 -0.19 0.06 -0.18 0.01 -0.17-0.03 -0.15-0.07 -0.13-0.11 -0.11-0.15 -0.08-0.18 -0.05-0.21 -0.02-0.23 0.02-0.25 0.05-0.25 0.08-0.25 0.11-0.24 0.13-0.22 0.15-0.2 0.17-0.17 0.18-0.14 0.19-0.1 0.19-0.06 0.18-0.02 0.17 0.03 0.15 0.07 0.13 0.11 0.1 0.15 0.08 0.18 0.05 0.21 0.02 0.23 -0.02 0.24L95.09 10242.16z"/>
<path fill="#0A0501" d="M97.25 10240.06l-0.14-0.63 -0.24-0.55 -0.32-0.45 -0.39-0.34 -0.46-0.22 -0.51-0.09 -0.54 0.04 -0.56 0.17 -0.56 0.3 -0.54 0.41 -0.51 0.52 -0.46 0.6 -0.4 0.67 -0.32 0.72 -0.24 0.75 -0.14 0.75 -0.05 0.73 0.05 0.69 0.14 0.63 0.24 0.55 0.32 0.45 0.4 0.34 0.46 0.22 0.51 0.09 0.54-0.04 0.56-0.17 0.56-0.3 0.54-0.41 0.51-0.52 0.46-0.6 0.4-0.67 0.32-0.72 0.24-0.75 0.14-0.75 0.05-0.73L97.25 10240.06zM96.1 10242.2l-0.15 0.5 -0.22 0.48 -0.26 0.45 -0.3 0.4 -0.34 0.34 -0.36 0.28 -0.37 0.2 -0.37 0.12 -0.36 0.03 -0.34-0.06 -0.31-0.14 -0.26-0.23 -0.21-0.3 -0.16-0.37 -0.1-0.42 -0.03-0.46 0.03-0.49 0.1-0.5 0.16-0.5 0.22-0.48 0.26-0.45 0.31-0.4 0.34-0.35 0.36-0.27 0.37-0.2 0.37-0.11 0.36-0.03 0.34 0.06 0.31 0.14 0.26 0.23 0.22 0.3 0.15 0.37 0.1 0.42 0.03 0.46 -0.03 0.49L96.1 10242.2z"/>
CSS
<g id="car-purple" class="section-one-car purple">
<polygon fill="#3B3F40" points="63.65 10257.45 72.8 10259.42 76.65 10257.84 91.81 10257.84 103.48 10252.35 99.48 10245.7 100.35 10241.63 82.9 10236.69"/>
<polygon fill="#242928" points="46.91 10248.77 45.48 10249.52 63.65 10257.45 100.35 10241.63 97.36 10236.62"/>
<polygon fill="#0A0501" points="89.28 10244.99 92.03 10246.13 92.77 10243.5"/>
<polygon fill="#0A0501" points="66.51 10254.44 69.26 10255.58 69.99 10252.94"/>
<polygon fill="#EB3853" points="48.73 10244.8 45.05 10243.25 45.05 10245.94 48.73 10247.49"/>
<polygon fill="#EB3853" points="59.27 10249.26 59.27 10251.95 63.59 10253.77 63.59 10251.08"/>
<polygon class="color" points="63.59 10251.08 63.59 10248.71 59.27 10246.89 49.69 10242.84 45.05 10240.88 45.05 10243.25 48.73 10244.8 48.73 10247.49 45.05 10245.94 45.05 10248.33 49.69 10250.3 59.27 10254.35 63.59 10256.17 63.59 10253.77 59.27 10251.95 59.27 10249.26"/>
<polygon class="color" points="49.25 10239.1 67.79 10246.94 63.59 10248.71 45.05 10240.88"/>
<polygon class="color" points="54.1 10225.23 49.25 10239.1 67.79 10246.94 72.64 10233.07"/>
<polygon class="color" points="71.1 10218.05 54.1 10225.23 72.64 10233.07 89.64 10225.89"/>
<polygon class="color" points="101.5 10232.69 94.27 10235.75 89.64 10225.89 72.64 10233.07 67.79 10246.94 63.59 10248.71 63.59 10256.17 101.5 10240.14"/>
<polygon class="color" points="90.69 10228.11 101.5 10232.69 94.27 10235.75"/>
<polygon fill="#005A58" points="83.48 10230.08 88.93 10227.78 92.28 10234.92 83.48 10238.65"/>
<polygon fill="#005A58" points="80.9 10239.69 70.02 10244.29 73.5 10234.35 80.9 10231.22"/>
<polygon fill="#00AEBA" points="54.94 10227.67 51.29 10238.11 66.68 10244.61 70.33 10234.16"/>
<polygon fill="#4F5451" points="72.37 10250.88 72.32 10250.67 72.24 10250.48 72.13 10250.33 72 10250.22 71.85 10250.15 71.68 10250.12 71.5 10250.13 71.32 10250.19 71.13 10250.29 70.95 10250.42 70.78 10250.6 70.63 10250.8 70.5 10251.02 70.39 10251.27 70.31 10251.52 70.26 10251.77 70.25 10252.01 70.26 10252.24 70.31 10252.45 70.39 10252.64 70.5 10252.78 70.63 10252.9 70.78 10252.97 70.95 10253 71.13 10252.99 71.32 10252.93 71.5 10252.83 71.68 10252.69 71.85 10252.52 72 10252.32 72.13 10252.09 72.24 10251.85 72.32 10251.6 72.37 10251.35 72.38 10251.11"/>
<path fill="#4A3F3E" d="M73.42 10250.19l-0.1-0.42 -0.16-0.37 -0.21-0.3 -0.26-0.23 -0.31-0.14 -0.34-0.06 -0.36 0.03 -0.37 0.12 -0.37 0.2 -0.36 0.27 -0.34 0.35 -0.31 0.4 -0.26 0.45 -0.21 0.48 -0.16 0.5 -0.1 0.5 -0.03 0.49 0.03 0.46 0.1 0.42 0.16 0.37 0.22 0.3 0.26 0.23 0.31 0.14 0.34 0.06 0.36-0.03 0.37-0.11 0.37-0.2 0.36-0.28 0.34-0.34 0.31-0.4 0.26-0.45 0.22-0.48 0.16-0.5 0.1-0.5 0.03-0.49L73.42 10250.19zM72.32 10251.6l-0.08 0.25 -0.1 0.24 -0.13 0.23 -0.15 0.2 -0.17 0.17 -0.18 0.14 -0.19 0.1 -0.19 0.06 -0.18 0.01 -0.17-0.03 -0.15-0.07 -0.13-0.11 -0.11-0.15 -0.08-0.18 -0.05-0.21 -0.02-0.23 0.02-0.25 0.05-0.25 0.08-0.25 0.11-0.24 0.13-0.22 0.15-0.2 0.17-0.17 0.18-0.14 0.19-0.1 0.19-0.06 0.18-0.02 0.17 0.03 0.15 0.07 0.13 0.11 0.11 0.15 0.08 0.18 0.05 0.21 0.02 0.23 -0.02 0.24L72.32 10251.6z"/>
<path fill="#0A0501" d="M74.47 10249.51l-0.14-0.63 -0.24-0.55 -0.32-0.45 -0.39-0.34 -0.46-0.22 -0.51-0.09 -0.54 0.04 -0.56 0.17 -0.56 0.3 -0.54 0.41 -0.51 0.52 -0.46 0.6 -0.4 0.67 -0.32 0.72 -0.24 0.75 -0.14 0.75 -0.05 0.73 0.05 0.69 0.14 0.63 0.24 0.55 0.32 0.45 0.4 0.34 0.46 0.22 0.51 0.09 0.54-0.04 0.56-0.17 0.56-0.3 0.54-0.41 0.51-0.52 0.46-0.6 0.4-0.67 0.32-0.72 0.24-0.75 0.14-0.75 0.05-0.73L74.47 10249.51zM73.32 10251.65l-0.16 0.5 -0.21 0.48 -0.26 0.45 -0.31 0.4 -0.34 0.34 -0.36 0.28 -0.37 0.2 -0.37 0.12 -0.36 0.03 -0.34-0.06 -0.31-0.14 -0.26-0.23 -0.21-0.3 -0.16-0.37 -0.1-0.42 -0.03-0.46 0.03-0.49 0.1-0.5 0.16-0.5 0.22-0.48 0.26-0.45 0.31-0.4 0.34-0.35 0.36-0.27 0.37-0.2 0.37-0.11 0.36-0.03 0.34 0.06 0.31 0.14 0.26 0.23 0.22 0.3 0.16 0.37 0.1 0.42 0.03 0.46 -0.03 0.49L73.32 10251.65z"/>
<polygon fill="#4F5451" points="95.14 10241.43 95.09 10241.22 95.01 10241.03 94.91 10240.88 94.78 10240.77 94.62 10240.7 94.45 10240.67 94.27 10240.68 94.09 10240.74 93.9 10240.84 93.72 10240.98 93.56 10241.15 93.4 10241.35 93.27 10241.57 93.16 10241.82 93.09 10242.07 93.04 10242.32 93.02 10242.56 93.04 10242.79 93.09 10243 93.16 10243.19 93.27 10243.33 93.4 10243.45 93.56 10243.52 93.72 10243.55 93.9 10243.54 94.09 10243.48 94.27 10243.38 94.45 10243.24 94.62 10243.07 94.78 10242.87 94.91 10242.64 95.01 10242.4 95.09 10242.16 95.14 10241.9 95.16 10241.66"/>
<path fill="#4A3F3E" d="M96.19 10240.75l-0.1-0.42 -0.15-0.37 -0.22-0.3 -0.26-0.23 -0.3-0.14 -0.34-0.06 -0.36 0.03 -0.37 0.12 -0.37 0.2 -0.36 0.27 -0.34 0.35 -0.31 0.4 -0.26 0.45 -0.21 0.48 -0.16 0.5 -0.1 0.5 -0.03 0.49 0.03 0.46 0.1 0.42 0.16 0.37 0.22 0.3 0.26 0.23 0.31 0.14 0.34 0.06 0.36-0.03 0.37-0.11 0.37-0.2 0.36-0.28 0.34-0.34 0.31-0.4 0.26-0.45 0.22-0.48 0.15-0.5 0.1-0.5 0.03-0.49L96.19 10240.75zM95.09 10242.16l-0.08 0.25 -0.1 0.24 -0.13 0.23 -0.15 0.2 -0.17 0.17 -0.18 0.14 -0.19 0.1 -0.19 0.06 -0.18 0.01 -0.17-0.03 -0.15-0.07 -0.13-0.11 -0.11-0.15 -0.08-0.18 -0.05-0.21 -0.02-0.23 0.02-0.25 0.05-0.25 0.08-0.25 0.11-0.24 0.13-0.22 0.15-0.2 0.17-0.17 0.18-0.14 0.19-0.1 0.19-0.06 0.18-0.02 0.17 0.03 0.15 0.07 0.13 0.11 0.1 0.15 0.08 0.18 0.05 0.21 0.02 0.23 -0.02 0.24L95.09 10242.16z"/>
<path fill="#0A0501" d="M97.25 10240.06l-0.14-0.63 -0.24-0.55 -0.32-0.45 -0.39-0.34 -0.46-0.22 -0.51-0.09 -0.54 0.04 -0.56 0.17 -0.56 0.3 -0.54 0.41 -0.51 0.52 -0.46 0.6 -0.4 0.67 -0.32 0.72 -0.24 0.75 -0.14 0.75 -0.05 0.73 0.05 0.69 0.14 0.63 0.24 0.55 0.32 0.45 0.4 0.34 0.46 0.22 0.51 0.09 0.54-0.04 0.56-0.17 0.56-0.3 0.54-0.41 0.51-0.52 0.46-0.6 0.4-0.67 0.32-0.72 0.24-0.75 0.14-0.75 0.05-0.73L97.25 10240.06zM96.1 10242.2l-0.15 0.5 -0.22 0.48 -0.26 0.45 -0.3 0.4 -0.34 0.34 -0.36 0.28 -0.37 0.2 -0.37 0.12 -0.36 0.03 -0.34-0.06 -0.31-0.14 -0.26-0.23 -0.21-0.3 -0.16-0.37 -0.1-0.42 -0.03-0.46 0.03-0.49 0.1-0.5 0.16-0.5 0.22-0.48 0.26-0.45 0.31-0.4 0.34-0.35 0.36-0.27 0.37-0.2 0.37-0.11 0.36-0.03 0.34 0.06 0.31 0.14 0.26 0.23 0.22 0.3 0.15 0.37 0.1 0.42 0.03 0.46 -0.03 0.49L96.1 10242.2z"/>
</g>CSS
.section-one-car {
&.purple {
.color {
fill: #7E217B;
&:nth-child(1) {
fill: #773573;
}
&:nth-child(2) {
fill: #8a2587;
}
&:nth-child(3) {
fill: #952797;
}
&:nth-child(4) {
fill: #491147;
}
&:nth-child(5) {
fill: #781F73;
}
}
}
}.section-one-car {
&.white {
.color {
fill: #94aaad;
&:nth-child(1) {
fill: #CED2DB;
}
&:nth-child(2) {
fill: #D5DDE3;
}
&:nth-child(3) {
fill: #D4DCE1;
}
&:nth-child(4) {
fill: #777E7E;
}
&:nth-child(5) {
fill: #B6BABE;
}
}
}
}.section-one-car {
&.blue {
.color {
fill: #012848;
&:nth-child(1) {
fill: #00375D;
}
&:nth-child(2) {
fill: #0A294B;
}
&:nth-child(3) {
fill: #03375C;
}
&:nth-child(4) {
fill: #00182F;
}
&:nth-child(5) {
fill: #00375D;
}
}
}
}
CSS
<script id="section-one-car" type="x-handlebars-template">
{{#each carColor}}
<g id="car-{{this}}" class="section-one-car {{this}}">
...
</g>
{{/each}}
</script>Streamline this with Handlebars.js Templates
var theElementsObject = {
"#section-one-car": {
values: {carColor: ["purple","blue","white"]},
target: "#section-one-svg-container",
placement: "append"
}
}
for (var key in theElementsObject) {
var theSource = $(key).html();
var theTemplate = Handlebars.compile(theSource);
var theHTML = theTemplate(theElementsObject[key].values);
$(theElementsObject[key].target).append(theHTML);
}CSS
CSS
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="242px" height="364.5px" viewBox="0 0 242 364.5" enable-background="new 0 0 242 364.5" xml:space="preserve">
<g id="the-text">
<path d="M61.437,252.395c0,2.091-0.396,4.086-1.188,5.985c-0.792,1.9-1.885,3.562-3.277,4.987 c-1.394,1.426-3.025,2.565-4.893,3.42c-1.869,0.855-3.88,1.283-6.032,1.283c-1.838,0-3.705-0.254-5.605-0.761 c-1.9-0.506-3.61-1.377-5.13-2.612c-1.52-1.234-2.771-2.864-3.752-4.893c-0.982-2.025-1.472-4.591-1.472-7.694v-37.24 c0-2.216,0.38-4.274,1.14-6.175c0.76-1.9,1.836-3.547,3.23-4.94c1.393-1.392,3.055-2.485,4.988-3.277 c1.931-0.791,4.068-1.188,6.412-1.188c2.216,0,4.275,0.396,6.175,1.188c1.9,0.792,3.546,1.899,4.94,3.325 c1.393,1.425,2.485,3.135,3.277,5.13c0.792,1.995,1.188,4.165,1.188,6.507v3.801h-9.69v-3.23c0-1.9-0.539-3.546-1.615-4.939 c-1.078-1.393-2.534-2.09-4.37-2.09c-2.408,0-4.006,0.744-4.797,2.232c-0.793,1.488-1.188,3.372-1.188,5.652v34.58 c0,1.964,0.427,3.609,1.282,4.939s2.39,1.995,4.607,1.995c0.632,0,1.314-0.109,2.042-0.332c0.728-0.222,1.393-0.585,1.995-1.093 c0.601-0.506,1.093-1.202,1.473-2.09c0.38-0.887,0.57-1.995,0.57-3.325v-3.325h9.69V252.395z"/>
<path d="M69.321,199.859h9.69v57.95h19.19v9.69h-28.88V199.859z"/>
<path d="M104.471,199.859h28.88v9.121h-19.19v19.854h16.72v9.12h-16.72v19.854h19.19v9.69h-28.88V199.859z"/>
<path d="M150.355,199.859h8.075l15.105,67.641h-9.69l-2.85-14.535h-13.205l-2.85,14.535h-9.69L150.355,199.859z M154.44,219.335 h-0.19l-4.75,24.51h9.69L154.44,219.335z"/>
<path d="M177.905,199.859h9.31l14.631,40.756h0.189v-40.756h9.689V267.5h-9.119l-14.82-40.66h-0.189v40.66h-9.69V199.859z"/>
<path d="M30.087,287.82c0-2.723,0.475-5.13,1.425-7.221c0.95-2.09,2.2-3.814,3.752-5.177c1.551-1.361,3.292-2.391,5.225-3.088 c1.931-0.696,3.878-1.045,5.842-1.045c1.962,0,3.91,0.349,5.843,1.045c1.931,0.697,3.672,1.727,5.225,3.088 c1.551,1.362,2.802,3.087,3.752,5.177c0.95,2.091,1.425,4.498,1.425,7.221v35.72c0,2.788-0.475,5.21-1.425,7.268 c-0.95,2.059-2.202,3.769-3.752,5.13c-1.553,1.362-3.294,2.392-5.225,3.088c-1.933,0.695-3.88,1.045-5.843,1.045 c-1.964,0-3.911-0.35-5.842-1.045c-1.933-0.696-3.674-1.726-5.225-3.088c-1.553-1.361-2.802-3.071-3.752-5.13 c-0.95-2.058-1.425-4.479-1.425-7.268V287.82z M39.777,323.54c0,2.344,0.648,4.07,1.947,5.178 c1.297,1.108,2.833,1.662,4.607,1.662c1.772,0,3.309-0.554,4.607-1.662c1.297-1.107,1.948-2.834,1.948-5.178v-35.72 c0-2.343-0.65-4.069-1.948-5.178c-1.299-1.107-2.835-1.662-4.607-1.662c-1.774,0-3.31,0.555-4.607,1.662 c-1.299,1.108-1.947,2.835-1.947,5.178V323.54z"/>
<path d="M71.126,271.86h15.58c11.4,0,17.1,6.618,17.1,19.854c0,3.928-0.618,7.301-1.853,10.117 c-1.235,2.819-3.405,5.083-6.508,6.793l10.45,30.875h-10.26l-9.025-28.88h-5.795v28.88h-9.69V271.86z M80.816,302.07h5.51 c1.71,0,3.071-0.238,4.085-0.713c1.012-0.475,1.789-1.154,2.327-2.042c0.538-0.887,0.903-1.979,1.093-3.278 c0.19-1.297,0.285-2.802,0.285-4.512s-0.095-3.214-0.285-4.513c-0.19-1.298-0.586-2.406-1.188-3.325 c-0.603-0.917-1.441-1.599-2.518-2.043c-1.078-0.441-2.503-0.664-4.275-0.664h-5.035V302.07z"/>
<path fill="#D12027" d="M124.325,271.86h14.345c5.51,0,9.721,1.536,12.635,4.607c2.912,3.072,4.37,7.362,4.37,12.872v31.635 c0,6.334-1.537,11.006-4.607,14.013c-3.073,3.009-7.49,4.513-13.253,4.513h-13.49V271.86z M134.015,330.38h4.465 c2.723,0,4.655-0.68,5.795-2.042c1.14-1.361,1.71-3.499,1.71-6.413V289.34c0-2.66-0.539-4.717-1.615-6.175 c-1.078-1.456-3.04-2.185-5.89-2.185h-4.465V330.38z"/>
<path fill="#D12027" d="M165.08,271.86h9.69v67.64h-9.69V271.86z"/>
<path fill="#D12027" d="M184.174,271.86h28.88v9.12h-19.19v19.854h16.721v9.12h-16.721v19.854h19.19v9.69h-28.88V271.86z"/>
</g>
</svg>
SVG TEXT
CSS
Animating text often results in it being converted from the searchable <text> tag to various polygons and paths. Keep SEO in mind if animating text.
CSS
SCSS STYLES
#the-text {
path {
@include animation(text-scale 1s);
@include transform-origin(center);
@include animation-timing-function(cubic-bezier(.4,.67,.54,.67));
&:nth-child(2) {
@include animation-delay(.1s);
}
&:nth-child(3) {
@include animation-delay(.2s);
}
...
&:nth-child(8) {
fill: none;
@include animation(text-scale 1s alternate, to-red 1s 1s);
@include animation-fill-mode(forwards);
@include animation-delay(.7s);
}
...
}
}CSS
SCSS ANIMATIONS
@include keyframes(text-scale) {
0%,100% { @include transform(scale(1)); }
50% { @include transform(scale(1.2)); }
}@include keyframes(to-red) {
0% { fill: #fff; }
100% { fill: #D00; }
}CSS
SVG SKULL
<g id="the-skull">
<path fill="#D12027" d="M94.81,101.834c0,0,1,3.667-3.167,6.667c0,0-2.062,7.5,1.636,10.667c0,0,11.031-1.167,9.864,4.833 l0.086,19.833l3.247,0.833l2.5-1.333l4.833,1.333l4.167-1.667l4.167,1.667l3.667-0.833l2.667,1.5l2-2v-10.833 c0,0,1.667-9,8.667-13.167c0,0,8.833-1,10.5-8.333c0,0,1-3,0-5.167c0,0-5.833-2.834-8.667-6.667c0,0-0.5-4,0-5.667"/>
<path d="M94.81,101.834c0.095,0.309,0.16,0.638,0.182,0.967c0.011,0.165,0.045,0.332,0.026,0.497l-0.026,0.5 c0.006,0.341-0.111,0.659-0.172,0.993c-0.045,0.162-0.055,0.341-0.131,0.492l-0.198,0.47c-0.141,0.309-0.243,0.651-0.46,0.916"/>
<path fill="#D12027" d="M149.644,105.834c0,0,0-5.333,2-7c0,0,1.167-0.833,1-20.417c0,0-6.333-23.083-32.833-23.417 c0,0-22.833,0.5-29.667,24.5c0,0-3.667,12.167,4.667,22.333c0,0,0.52,10.423,2.02,2.256"/>
<path d="M149.644,105.834c-0.093-1.246-0.059-2.503,0.109-3.764c0.088-0.63,0.218-1.264,0.44-1.888 c0.23-0.618,0.532-1.253,1.088-1.784l0.033-0.025c-0.04,0.025-0.083,0.067-0.105,0.097l-0.008,0.006l-0.013,0.016"/>
<path d="M107.419,104.167c0,0-3.833-0.833-3.667,3s3.667,4.834,4.5,4.667s3.5-1.132,4.833,0.017s5.167-2.077,5.167-3.88 c0,0-2.333,1.379-4.833,0.121S107.419,104.167,107.419,104.167z"/>
<path d="M122.531,108.092c0,0,5.167,1.242,8.5-5.258c0,0,8-3.654,8.167,1.256c0,0,2.667,7.244-8.333,9.41c0,0-4,0.167-3-2.667 C127.865,110.834,122.198,111.517,122.531,108.092z"/>
<path d="M120.919,117.501c0,0-5.667,7.5-4.5,11.667c0,0,2.5,5,4.5,0c0,0,4.805,5.5,4.819-0.167 C125.738,129.001,125.253,120.334,120.919,117.501z"/>
</g>
CSS
SCSS ANIMATIONS
#the-skull {
@include transform(scale(0));
@include animation(the-skull 3s 1s);
@include transform-origin(center);
@include animation-fill-mode(forwards);
}@include keyframes(the-skull) {
0% { @include transform(rotate(0) scale(0)); }
40%,60%,80% { @include transform(rotate(0deg) scale(1.05)); }
50% { @include transform(rotate(10deg) scale(1.05)); }
70% { @include transform(rotate(-10deg) scale(1.05)); }
100% { @include transform(rotate(0) scale(1)); }
}CSS
SVG MOP & BROOM
<g id="broom">
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M196.584,30.835l19.666,24.166c0,0-21.332,24.834-27.666,26.5 c0,0-3.667,2-11.834,0L70.917,173.168c0,0-2.643-0.888-3.333-1.667c-0.603-0.68-1.834-4.167-1.834-4.167l104.667-90.667 c0,0-3.833-17.167,4.333-27C174.75,49.668,191.75,32.502,196.584,30.835z"/>
<path d="M179.05,53.297c0,0,4.985-4.855,10.031-9.643c1.254-1.206,2.497-2.423,3.689-3.535c0.612-0.539,1.186-1.079,1.762-1.556 c0.571-0.482,1.111-0.938,1.61-1.359c0.496-0.423,0.977-0.785,1.389-1.119c0.413-0.333,0.778-0.618,1.087-0.844 c0.607-0.463,0.968-0.713,0.967-0.714l0.068,0.074c-0.001,0-0.282,0.335-0.798,0.899c-0.253,0.287-0.569,0.625-0.938,1.007 c-0.37,0.38-0.772,0.826-1.239,1.282c-0.464,0.459-0.966,0.956-1.498,1.482c-0.526,0.531-1.115,1.054-1.707,1.616 c-1.214,1.087-2.538,2.217-3.852,3.357c-5.221,4.597-10.504,9.126-10.504,9.126L179.05,53.297z"/>
<path d="M176.88,64.8c0,0,6.169-6.914,12.405-13.765c1.553-1.719,3.105-3.438,4.562-5.049c0.753-0.782,1.461-1.556,2.168-2.257 c0.702-0.707,1.365-1.375,1.978-1.991c0.609-0.619,1.195-1.161,1.7-1.655c0.507-0.493,0.953-0.917,1.329-1.259 c0.742-0.693,1.181-1.076,1.181-1.076l0.072,0.068c0,0-0.354,0.462-0.996,1.249c-0.315,0.397-0.71,0.872-1.168,1.409 c-0.459,0.537-0.962,1.157-1.539,1.806c-0.574,0.652-1.197,1.357-1.855,2.104c-0.653,0.751-1.379,1.509-2.109,2.312 c-1.512,1.559-3.124,3.222-4.736,4.884c-6.425,6.674-12.917,13.287-12.917,13.287L176.88,64.8z"/>
<path d="M183.547,67.967c0,0,5.56-6.402,11.187-12.744c1.399-1.591,2.8-3.182,4.113-4.674c0.682-0.722,1.321-1.438,1.963-2.085 c0.637-0.652,1.238-1.268,1.794-1.837c0.553-0.571,1.087-1.07,1.546-1.525c0.46-0.454,0.867-0.845,1.21-1.159 c0.676-0.638,1.076-0.99,1.076-0.99l0.074,0.067c0,0-0.315,0.43-0.891,1.16c-0.283,0.37-0.636,0.81-1.048,1.308 c-0.413,0.498-0.862,1.074-1.382,1.675c-0.518,0.604-1.078,1.258-1.671,1.95c-0.588,0.696-1.245,1.397-1.904,2.14 c-1.369,1.439-2.83,2.976-4.291,4.511c-5.818,6.166-11.703,12.271-11.703,12.271L183.547,67.967z"/>
<path d="M189.314,71.134c0.001,0,5.18-5.893,10.426-11.723c1.302-1.466,2.594-2.942,3.833-4.3 c0.638-0.662,1.233-1.321,1.834-1.913c0.596-0.597,1.158-1.161,1.678-1.682c0.518-0.523,1.019-0.978,1.448-1.394 c0.431-0.415,0.812-0.771,1.134-1.058c0.634-0.582,1.011-0.901,1.011-0.901l0.072,0.068c0,0-0.291,0.398-0.825,1.073 c-0.262,0.342-0.59,0.748-0.973,1.208c-0.384,0.458-0.801,0.991-1.285,1.544c-0.482,0.556-1.004,1.158-1.556,1.795 c-0.547,0.642-1.161,1.284-1.775,1.968c-1.264,1.334-2.643,2.73-4.011,4.135c-5.435,5.654-10.938,11.247-10.937,11.247 L189.314,71.134z"/>
...
</g>
<g id="mop">
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M53.818,61.835l122,94.333c0,0,2.667,7-5,5.333l-120.5-93.5 c0,0-3.667,5.166,0,25.5c0,0,10.667,16.834-13.833,44c0,0,9.333-9.834,5.833-20c0,0-9.667-11-15.667-28.333 c0,0-6-28.834,12.667-34.167C39.318,55.001,47.818,52.835,53.818,61.835z"/>
<path d="M31.2,69.514c0,0-0.331,1.536-0.742,3.855c-0.403,2.32-0.928,5.415-1.269,8.527c-0.164,1.556-0.291,3.115-0.368,4.571 c-0.081,0.728-0.095,1.431-0.15,2.097c-0.066,0.667-0.077,1.295-0.091,1.877c-0.027,0.584-0.037,1.116-0.022,1.588 c0.006,0.474,0.001,0.89,0.039,1.227c0.058,0.677,0.074,1.078,0.074,1.078l-0.097,0.024c0,0-0.128-0.372-0.324-1.045 c-0.121-0.334-0.188-0.751-0.262-1.232c-0.078-0.48-0.184-1.024-0.201-1.621c-0.089-1.192-0.119-2.588-0.004-4.07 c0.112-1.483,0.359-3.047,0.613-4.604c0.5-3.117,1.147-6.2,1.719-8.491c0.559-2.294,0.988-3.808,0.988-3.808L31.2,69.514z"/>
<path d="M39.028,65.861c-1.218,2.156-2.159,4.463-2.902,6.818c-0.198,0.585-0.334,1.189-0.504,1.783 c-0.179,0.591-0.274,1.203-0.411,1.804c-0.142,0.601-0.232,1.21-0.313,1.821c-0.083,0.61-0.195,1.216-0.219,1.833 c-0.039,0.614-0.099,1.226-0.121,1.84l0.021,1.842c-0.019,0.615,0.104,1.222,0.149,1.832c0.06,0.61,0.113,1.22,0.263,1.815 l0.374,1.796l0.566,1.743c0.097,0.29,0.183,0.583,0.289,0.868l0.385,0.831l0.768,1.659l0.015,0.031 c0.812,1.894,1.55,3.8,2.228,5.738c0.349,0.965,0.649,1.946,0.952,2.926c0.288,0.985,0.582,1.969,0.812,2.971 c0.258,0.994,0.46,2.003,0.677,3.007l0.272,1.519c0.094,0.505,0.134,1.021,0.202,1.531s0.123,1.021,0.146,1.537 c0.021,0.515,0.096,1.024,0.07,1.542c-0.014,0.516-0.009,1.031-0.039,1.543l-0.182,1.531l-0.1-0.012l0.008-1.524 c-0.021-0.507-0.075-1.013-0.111-1.517c-0.031-0.504-0.127-1.005-0.187-1.507c-0.058-0.502-0.148-1-0.25-1.498 c-0.102-0.497-0.176-0.997-0.304-1.488l-0.33-1.483c-0.254-0.982-0.493-1.966-0.788-2.938c-0.562-1.949-1.17-3.886-1.818-5.811 c-0.647-1.923-1.318-3.85-2.065-5.729l0.014,0.031l-0.749-1.741l-0.373-0.869c-0.103-0.298-0.186-0.603-0.279-0.904l-0.543-1.811 l-0.344-1.857c-0.14-0.615-0.181-1.243-0.229-1.87c-0.033-0.627-0.144-1.25-0.111-1.878l0.02-1.881 c0.035-0.625,0.11-1.248,0.164-1.871c0.04-0.626,0.164-1.24,0.268-1.856c0.1-0.617,0.21-1.232,0.372-1.836 c0.156-0.604,0.271-1.219,0.469-1.812c0.189-0.594,0.345-1.199,0.562-1.783c0.82-2.352,1.833-4.64,3.12-6.77L39.028,65.861z"/>
<path d="M45.36,66.862c-1.046,1.699-1.964,3.484-2.662,5.346c-0.351,0.929-0.644,1.881-0.807,2.852 c-0.049,0.242-0.088,0.484-0.102,0.728c-0.013,0.243-0.065,0.486-0.045,0.728c0.01,0.242,0.001,0.485,0.027,0.723l0.119,0.705 l0.005,0.026c0.907,6.086,2.036,12.15,3.477,18.124l1.116,4.468c0.183,0.746,0.385,1.485,0.588,2.224 c0.207,0.737,0.387,1.484,0.616,2.215l0.69,2.19l0.768,2.162c0.258,0.721,0.614,1.394,0.901,2.107 c0.309,0.701,0.748,1.325,1.107,2.012l-0.079,0.062c-0.453-0.62-0.966-1.223-1.357-1.895c-0.375-0.677-0.786-1.348-1.105-2.056 l-0.949-2.131l-0.8-2.186c-0.265-0.73-0.48-1.474-0.723-2.21c-0.25-0.735-0.445-1.484-0.644-2.232 c-0.192-0.75-0.422-1.491-0.58-2.249l-0.511-2.263c-0.627-3.028-1.179-6.068-1.686-9.113c-0.498-3.047-0.945-6.099-1.317-9.167 l0.005,0.026l-0.106-0.778c-0.019-0.259-0.002-0.518-0.004-0.776c-0.011-0.26,0.05-0.51,0.072-0.765 c0.023-0.256,0.072-0.506,0.131-0.753c0.202-0.998,0.533-1.956,0.918-2.885c0.768-1.862,1.748-3.622,2.853-5.293L45.36,66.862z"/>
...
</g>
CSS
SCSS STYLES & ANIMATION
#broom {
@include transform(translateX(-500px));
@include animation(the-broom 1s 2s ease-out);
@include animation-fill-mode(forwards);
}
#mop {
@include transform(translateX(500px));
@include animation(the-mop 1s 2s ease-out);
@include animation-fill-mode(forwards);
}@include keyframes(the-broom) {
0% { @include transform(translateX(-500px)); }
100% { @include transform(translateX(0)); }
}
@include keyframes(the-mop) {
0% { @include transform(translateX(500px)); }
100% { @include transform(translateX(0)); }
}CSS
SVG RED SQUARE
<rect id="red-square" x="13.25" y="13.5" fill="#D12027" stroke="#000000"
stroke-width="5" stroke-miterlimit="10" width="215.5" height="176.5"/>
#red-square {
fill: none;
@include animation(to-red 1s 1s);
@include animation-fill-mode(forwards);
}
@include keyframes(to-red) {
0% { fill: #fff; }
100% { fill: #D00; }
}SCSS STYLES & ANIMATIONS
CSS
THREE TO TANGO
JAVASCRIPT
|
SMIL
CSS
|
JavaScript
JavaScript provides great support and many resources for SVG animation
PROS
An abundance of libraries to streamline animation
Can serve as a fallback from CSS animations
Great triggering and chaining capabilities
Great cross-browser support
CONS
Can be cumbersome without the use of libraries
May require multiple libraries to cover everything
JavaScript
Useful SVG Libraries
http://maxwellito.github.io/vivus/
A library that gives your SVG the appearance of being drawn.
http://julian.com/research/velocity/
A library that increases animation performance beyond jQuery and CSS benchmarks
http://snapsvg.io/
A comprehensive library supporting many SVG animation properties, even clipping and masking.
http://greensock.com/gsap
A fast and robust library for animations.
Vivus
Velocity
Snap.SVG
GSAP
JavaScript
Basic Snap.SVG Animate Syntax for Single Element
Element.animate({attrs}, duration, [easing], [callback])theWhitePony.animate(
{transform: "t10,100, s0,0"},
5000,
mina.easein,
function() {
if (callback) {
callback();
}
);
JavaScript
Basic Snap.SVG Animate Syntax for Group of Elements
ants.forEach(function(theAnt) {
theAnt.animate(
transform: "s1.2,1.2",
5000,
mina.easein,
function() {
if (callback) {
callback();
}
)
});JavaScript
The default origin point for Rotate and Scale animations is the center point of the element. A different origin point must be specified in the animation attributes.
JavaScript
JavaScript
SVG PARROT
<g id="the-bird">
<path id="bird-body" fill="#8EBD6F" stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M335,159.395h-13v-5h-10.666v5H320l1.666,4.667 h-5l-1,29.667h-4.332v6h-19.668v4.667h-10v-4.667c0,0-4.666-1-5.666,0.333v14.334h4.666v5.332H286v4h6.334l-0.668,6.334h5 l-0.332,10H302v5.333h3.5v13.667h6.5v-4h4.334v-5l-5-0.334v-4.666l10.332,0.333v13.667H327v-4h4.666v-4.667H327v-5h3.334v-4.667 H337v-6h5v-5.333h19v-4l6-0.333v-4.667h4.666v-20.667c0,0-4.334-1.333-4.666,0l-0.334,4.667h-5v4H346v-1.667h-3.666v-6h-4.668 v-5.333h-6.332v-5.667H342v3.667l9.666,0.667v5h4.668v-14.667h-4.668v-18.667l-6-0.667v-5.333L335,159.395z"/>
<polygon fill="#7EB542" points="311.334,199.728 311.25,239.396 337,239.396 337,219.562 340.25,218.396 341.875,210.896 326.562,197.896 326.562,194.396 330.666,194.396 330.666,180.395 337,180.395 337,174.895 346.586,174.895 346.586,181.396 351.666,181.396 351.666,165.728 345.666,165.062 345.666,159.728 322,159.395 321.666,164.062 316.666,164.062 315.666,193.728 311.334,193.728"/>
<rect x="324.834" y="169.395" width="5.832" height="11"/>
<rect x="328.375" y="169.521" fill="#FFFFFF" width="2.291" height="2.625"/>
<rect x="341.875" y="169.395" width="4.375" height="4.876"/>
<rect x="345.227" y="169.585" fill="#FFFFFF" width="1.359" height="1.559"/>
<polygon fill="#53843C" points="296.666,230.062 306.5,230.062 306.5,233.646 311.25,233.646 311.25,239.396 337,239.396 337,240.728 330.334,240.728 330.334,245.395 305.5,245.395 302,245.395 302,240.062 296.334,240.062"/>
<line fill="none" stroke="#53843C" stroke-miterlimit="10" x1="326.666" y1="203.562" x2="334.333" y2="209.896"/>
</g>
JavaScript
SNAP.SVG ANIMATE
theBird = {
flapWings: function() {
birdBody.animate({
d: "M335,159.395h-13v-5h-10.666v5H320l1.666,4.667 h-5l-1,29.667h-4.332v6h-19.668v4.667l-13.035,0.202l-1.797,22.32c-1.897-1.094,14.518,1.511,13.417,2.979l0.032-12.378 l-0.616-1.85l0.833,2.5l-0.999,1.5l0.999,4.061h1.834l-0.668,6.334h5l-0.332,10H302v5.333h3.5v13.667h6.5v-4h4.334v-5l-5-0.334 v-4.666l10.332,0.333v13.667H327v-4h4.666v-4.667H327v-5h3.334v-4.667H337v-6h5v-5.333h19v-4l0.584-3.478l0.834,2.088l-0.5,4.996 l9.832,0.895c0,0,0.59-12.867,0.258-11.533l-1.258-12.342l-6.875,0.708l-2.209,1.667H346v-1.667h-3.666v-6h-4.668v-5.333h-6.332 v-5.667H342v3.667l9.666,0.667v5h4.668v-14.667h-4.668v-18.667l-6-0.667v-5.333L335,159.395z"
}, 70, mina.linear, function() {
setTimeout(function() {
birdBody.animate({
d: "M335,159.395h-13v-5h-10.666v5H320l1.666,4.667 h-5l-1,29.667h-4.332v6h-19.668v4.667h-10v-4.667c0,0-4.666-1-5.666,0.333v14.334h4.666v5.332H286v4h6.334l-0.668,6.334h5 l-0.332,10H302v5.333h3.5v13.667h6.5v-4h4.334v-5l-5-0.334v-4.666l10.332,0.333v13.667H327v-4h4.666v-4.667H327v-5h3.334v-4.667 H337v-6h5v-5.333h19v-4l6-0.333v-4.667h4.666v-20.667c0,0-4.334-1.333-4.666,0l-0.334,4.667h-5v4H346v-1.667h-3.666v-6h-4.668 v-5.333h-6.332v-5.667H342v3.667l9.666,0.667v5h4.668v-14.667h-4.668v-18.667l-6-0.667v-5.333L335,159.395z"
}, 70, mina.linear);
}, 100);
});
},
jump: function(y) {
bird.animate({
transform: 't0,-'+y
}, 100, mina.linear, function() {
bird.animate({
transform: 't0,0'
}, 100, mina.backout);
});
}
}theBird.jump('20');
theBird.flapWings();JavaScript
SVG PIRATE
<g id="the-pirate">
<g id="torso"> ... </g>
<g id="free-arm"> ... </g>
<g id="the-belt"> ... </g>
<g id="sword-arm"> ... </g>
</g>
<g id="the-head">
<g id="pirate-hat"> ... </g>
<g id="top-teeth"> ... </g>
<g id="bottom-teeth"> ... </g>
<g id="top-teeth"> ... </g>
</g>
<g id="legs">
<polygon id="main-green" fill="#689E4E" points="193,354.396 193,388.396 199,394.396 229,394.396 236,377.896 248.5,377.896 245,382.896 245,389.896 252,391.396 306.5,390.896 306.5,384.396 311,384.396 311,374.396 308,374.396 308,354.396"/>
<polygon id="boot-darkaccent" fill="#497A39" points="288.5,356.896 288.5,368.896 292.5,368.896 292.5,376.396 288.5,376.396 288.5,389.396 292.5,423.396 298.5,423.396 298.5,409.896 303,409.396 308.5,404.896 308.5,384.896 311.5,384.896 311.5,374.896 309.5,353.434 288.5,354.396"/>
<g id="peg-leg"> ... </g>
<g id="boot-leg"> ... </g>
</g>
</g>
JavaScript
SNAP.SVG JUMP & HEAD BOB
thePirate = {
headBob: function() {
head.animate({
transform: 't3,-3'
}, 50, mina.linear, function() {
head.animate({
transform: 't0,0'
}, 50, mina.linear);
});
},
jump: function() {
pirate.animate({
transform: 't0,-10'
}, 100, mina.linear, function() {
pirate.animate({
transform: 't0,0'
}, 100, mina.linear);
});
}
}JavaScript
SNAP.SVG LEG KICKS
thePirate = {
legKicks: function() {
legsGreen.animate({
points: "193,354.396 183.75,383.875 190.625,389.145 213.25,396.75 230.375,377.25 248.5,377.896 250.062,380.75 256.5,387.125 268.002,396 313.625,388.414 312.821,383.582 316.375,383.125 316.375,373.873 313,372.5 308,354.396"
}, 100, mina.linear, function() {
legsGreen.animate({
points: "193,354.396 193,388.396 199,394.396 229,394.396 236,377.896 248.5,377.896 245,382.896 245,389.896 252,391.396 306.5,390.896 306.5,384.396 311,384.396 311,374.396 308,374.396 308,354.396"
}, 100, mina.linear);
});
pegLeg.animate({
transform: 'r5,250,250'
}, 100, mina.linear, function() {
pegLeg.animate({
transform: 'r0,0,0'
}, 100, mina.linear);
});
}JavaScript
JavaScript
BUT THERE ARE CATCHES
JavaScript
Many jQuery functions cannot target SVG elements
$("svg .danger-zone").attr("class","danger-zone active");Workarounds
$("svg .danger-zone").toggleClass("active");
.addClass / .removeClass
.width() / .height()
.append() / .appendTo()$("svg .danger-zone").attr("class","danger-zone intrepid active");
$("svg .horizon").attr("class","horizon distress-signal inactive sos");
var theElementClasses = {
"svg #danger-zone": "danger-zone intrepid active",
"svg #horizon": "horizon distress-signal inactive sos" }
toggleSVGElementClass( theElementClasses );
toggleSVGElementClasses: function(theElementAndClassObject) {
for (var key in theElementAndClassObject) {
$(key).attr("class",theElementAndClassObject[key]);
}
}JavaScript
Many jQuery functions cannot target SVG elements
$("svg .danger-zone")[0].getBBox().[key];
getBBox = {
cx: number - x of the center,
cy: number - y of the center,
h/height: number - height,
path: string - path command for the box,
r0: number - radius of a circle that fully encloses the box,
r1: number - radius of the smallest circle that can be enclosed,
r2: number - radius of the largest circle that can be enclosed,
vb: string - box as a viewbox command,
w/width: number - width,
x2: number - x of the right side,
x: number - x of the left side,
y2: number - y of the bottom edge,
y: number - y of the top edge
}Workarounds
$("svg .danger-zone").width();JavaScript
Many jQuery functions cannot target SVG elements
$("#intrepid").parent("div").html($("#intrepid").parent().html());Workarounds
$("svg .pam, svg .cheryl").appendTo("#intrepid")Refreshing the DOM to append HTML is costly and slow.
JavaScript
theSVGElementsToBuild = {
"#cheryl": {
values: {attire: "spacesuite"},
target: "#intrepid",
placement: "prepend"
},
"#pam": {
values: {attire: "spacesuite"},
target: "#intrepid",
placement: "prepend"
},
"#barry": {
values: {type: "other"},
target: "#intrepid",
placement: "append"
}
};
buildSVGElementsFromTemplate( theSVGElementsToBuild );Workarounds
JavaScript
buildSVGElementsFromTemplate: function( theElementsObject ) {
var theSource, theTemplate, theHTML;
for (var key in theElementsObject) {
theSource = $(key).html();
theTemplate = Handlebars.compile(theSource);
theHTML = theTemplate(theElementsObject[key].values);
switch (theElementsObject[key].placement) {
case "append":
$(theElementsObject[key].target).append(theHTML);
break;
case "prepend":
$(theElementsObject[key].target).prepend(theHTML);
break;
}
}
$(theElementsObject[key].target).parent("div").html(
$(theElementsObject[key].target).parent().html());
}Workarounds
JavaScript
Looping Animations in Velocity.js
Workarounds: CSS Animation Looping
Start
End
Plays Forwards
Then Backwards
#car {
animation: launch-into-bay 5s 10s ease-in-out;
animation-iteration-count: 2; }Start
End
Plays Forwards
Resets to Original Values
VICIOUS COUPLING
EXAMPLES
|
RESOURCES
Examples
Examples
Examples
Examples
VICIOUS COUPLING
RESOURCES
|
EXAMPLES
Resources
JavaScript Libraries
SVG Optomization
General
THE END
...I swear I had something for this
Slides
slides.com/yuschick/intro-to-svg-animation
Intro to SVG Animation (2015)
By yuschick
Intro to SVG Animation (2015)
An Archer-themed presentation covering the basics of SVG animation.
