Vamos a animar un SVG con CSS para ello vamos a utilizar dos recursos open source.

El primero se llama Flat Surface Shader, creado por Matthew Wagerfield y Tobias Schneider, lo vamos a utilizar para generar el SVG que mas tarde animaremos con CSS.

Sus creadores nos explican su funcionamiento:

FFS is a small side project to explore the possibilities to make art with code.

Admit it, 3D is cool. But, you know what’s cooler? 2D. I love WebGL, but unfortunately it doesn’t work everywhere.

This lighting simulation can be configured to use either the 2D context of a canvas element or an array of SVG polygons to draw the triangles. It also utilises native Float32Arrays to store numerical data for highly optimised calculations.

This is a collaborative effort between Matthew Wagerfield and Tobias van Schneider – a couple of pandas trying to make the web a more magical place.

El menú de Flat Surface Shader es bastante sencillo de utilizar, jugando con el podemos ir viendo al instante los cambios que vamos haciendo. En el GitHub de Flat Surface Shader nos explican las funciones de cada opción.

Los valores que he utilizado para este ejemplo.

flat surface shader

He reducido el número de slices y segments ya que si no el SVG adquiere un tamaño bastante considerable.

Antes de exportar nos aseguramos de que en la pestaña de *render *hemos seleccionado SVG. Cuando le damos a exportar nos abre una pestaña con la imagen, simplemente le damos botón derecho, le damos a guardar y ya tenemos nuestro SVG.

El siguiente paso lo podemos hacer en Sublime o en Illustrator, yo prefiero hacerlo en Illustrator. Lo que vamos a hacer es abrir el SVG **y renombrar cada elemento, en este caso tenemos 48 polígonos o capas, así que las vamos a renombrar en orden numérico. Una vez completado este paso nos disponemos a abrir el **SVG en Sublime y veremos este código:

 1 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 2 	 width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
 3 <polygon id="cuarentayocho" fill="#C13745" stroke="#C13745" stroke-linejoin="round" stroke-miterlimit="1" points="
 4 	280.085,185.834 247.564,257.504 280.085,257.504 "/>
 5 <polygon id="cuarentaysiete" fill="#861845" stroke="#861845" stroke-linejoin="round" stroke-miterlimit="1" points="
 6 	247.564,185.834 247.564,257.504 280.085,185.834 "/>
 7 <polygon id="cuarentayseis" fill="#931E45" stroke="#931E45" stroke-linejoin="round" stroke-miterlimit="1" points="
 8 	280.085,114.166 247.564,185.834 280.085,185.834 "/>
 9 <polygon id="cuarentaycinco" fill="#B63145" stroke="#B63145" stroke-linejoin="round" stroke-miterlimit="1" points="
10 	247.564,114.166 247.564,185.834 280.085,114.166 "/>
11 <polygon id="cuarentaycuatro" fill="#B12E45" stroke="#B12E45" stroke-linejoin="round" stroke-miterlimit="1" points="
12 	280.085,42.497 247.564,114.166 280.085,114.166 "/>
13 <polygon id="cuarentaytres" fill="#D64245" stroke="#D64245" stroke-linejoin="round" stroke-miterlimit="1" points="
14 	247.564,42.497 247.564,114.166 280.085,42.497 "/>
15 <polygon id="cuarentaydos" fill="#9A2245" stroke="#9A2245" stroke-linejoin="round" stroke-miterlimit="1" points="
16 	247.564,185.834 215.042,257.504 247.564,257.504 "/>
17 <polygon id="cuarentayuno" fill="#B32F45" stroke="#B32F45" stroke-linejoin="round" stroke-miterlimit="1" points="
18 	215.042,185.834 215.042,257.504 247.564,185.834 "/>
19 <polygon id="cuarenta" fill="#D13F45" stroke="#D13F45" stroke-linejoin="round" stroke-miterlimit="1" points="247.564,114.166
20 	215.042,185.834 247.564,185.834 "/>
21 <polygon id="treintaynueve" fill="#E14845" stroke="#E14845" stroke-linejoin="round" stroke-miterlimit="1" points="
22 	215.042,114.166 215.042,185.834 247.564,114.166 "/>
23 <polygon id="treintayocho" fill="#DE4645" stroke="#DE4645" stroke-linejoin="round" stroke-miterlimit="1" points="247.564,42.497
24 	215.042,114.166 247.564,114.166 "/>
25 <polygon id="treintaysiete" fill="#E54A45" stroke="#E54A45" stroke-linejoin="round" stroke-miterlimit="1" points="
26 	215.042,42.497 215.042,114.166 247.564,42.497 "/>
27 <polygon id="treintayseis" fill="#962045" stroke="#962045" stroke-linejoin="round" stroke-miterlimit="1" points="
28 	215.042,185.834 182.521,257.504 215.042,257.504 "/>
29 <polygon id="treintaycinco" fill="#BC3445" stroke="#BC3445" stroke-linejoin="round" stroke-miterlimit="1" points="
30 	182.521,185.834 182.521,257.504 215.042,185.834 "/>
31 <polygon id="treintaycuatro" fill="#DD4645" stroke="#DD4645" stroke-linejoin="round" stroke-miterlimit="1" points="
32 	215.042,114.166 182.521,185.834 215.042,185.834 "/>
33 <polygon id="treintaytres" fill="#FF5E45" stroke="#FF5E45" stroke-linejoin="round" stroke-miterlimit="1" points="
34 	182.521,114.166 182.521,185.834 215.042,114.166 "/>
35 <polygon id="treintaydos" fill="#FF6045" stroke="#FF6045" stroke-linejoin="round" stroke-miterlimit="1" points="215.042,42.497
36 	182.521,114.166 215.042,114.166 "/>
37 <polygon id="treintayuno" fill="#FF5B45" stroke="#FF5B45" stroke-linejoin="round" stroke-miterlimit="1" points="182.521,42.497
38 	182.521,114.166 215.042,42.497 "/>
39 <polygon id="treinta" fill="#B53045" stroke="#B53045" stroke-linejoin="round" stroke-miterlimit="1" points="182.521,185.834
40 	150,257.504 182.521,257.504 "/>
41 <polygon id="veintinueve" fill="#D64245" stroke="#D64245" stroke-linejoin="round" stroke-miterlimit="1" points="150,185.834
42 	150,257.504 182.521,185.834 "/>
43 <polygon id="veintiocho" fill="#FF6045" stroke="#FF6045" stroke-linejoin="round" stroke-miterlimit="1" points="182.521,114.166
44 	150,185.834 182.521,185.834 "/>
45 <polygon id="veintisiete" fill="#FF6D45" stroke="#FF6D45" stroke-linejoin="round" stroke-miterlimit="1" points="150,114.166
46 	150,185.834 182.521,114.166 "/>
47 <polygon id="veintiseis" fill="#FF8A45" stroke="#FF8A45" stroke-linejoin="round" stroke-miterlimit="1" points="182.521,42.497
48 	150,114.166 182.521,114.166 "/>
49 <polygon id="veinticinco" fill="#FF9245" stroke="#FF9245" stroke-linejoin="round" stroke-miterlimit="1" points="150,42.497
50 	150,114.166 182.521,42.497 "/>
51 <polygon id="veinticuatro" fill="#C33845" stroke="#C33845" stroke-linejoin="round" stroke-miterlimit="1" points="150,185.834
52 	117.479,257.504 150,257.504 "/>
53 <polygon id="veintitres" fill="#D24045" stroke="#D24045" stroke-linejoin="round" stroke-miterlimit="1" points="117.479,185.834
54 	117.479,257.504 150,185.834 "/>
55 <polygon id="veintidos" fill="#FF5945" stroke="#FF5945" stroke-linejoin="round" stroke-miterlimit="1" points="150,114.166
56 	117.479,185.834 150,185.834 "/>
57 <polygon id="veinteuno" fill="#FF8045" stroke="#FF8045" stroke-linejoin="round" stroke-miterlimit="1" points="117.479,114.166
58 	117.479,185.834 150,114.166 "/>
59 <polygon id="veinte" fill="#FFFC45" stroke="#FFFC45" stroke-linejoin="round" stroke-miterlimit="1" points="150,42.497
60 	117.479,114.166 150,114.166 "/>
61 <polygon id="diecinueve" fill="#FFA845" stroke="#FFA845" stroke-linejoin="round" stroke-miterlimit="1" points="117.479,42.497
62 	117.479,114.166 150,42.497 "/>
63 <polygon id="dieciocho" fill="#BB3345" stroke="#BB3345" stroke-linejoin="round" stroke-miterlimit="1" points="117.479,185.834
64 	84.957,257.504 117.479,257.504 "/>
65 <polygon id="diecisiete" fill="#C93B45" stroke="#C93B45" stroke-linejoin="round" stroke-miterlimit="1" points="84.957,185.834
66 	84.957,257.504 117.479,185.834 "/>
67 <polygon id="dieciseis" fill="#F55345" stroke="#F55345" stroke-linejoin="round" stroke-miterlimit="1" points="117.479,114.166
68 	84.957,185.834 117.479,185.834 "/>
69 <polygon id="quince" fill="#FF6545" stroke="#FF6545" stroke-linejoin="round" stroke-miterlimit="1" points="84.957,114.166
70 	84.957,185.834 117.479,114.166 "/>
71 <polygon id="catorce" fill="#FFB245" stroke="#FFB245" stroke-linejoin="round" stroke-miterlimit="1" points="117.479,42.497
72 	84.957,114.166 117.479,114.166 "/>
73 <polygon id="trece" fill="#FF8545" stroke="#FF8545" stroke-linejoin="round" stroke-miterlimit="1" points="84.957,42.497
74 	84.957,114.166 117.479,42.497 "/>
75 <polygon id="doce" fill="#B12E45" stroke="#B12E45" stroke-linejoin="round" stroke-miterlimit="1" points="84.957,185.834
76 	52.437,257.504 84.957,257.504 "/>
77 <polygon id="once" fill="#BD3545" stroke="#BD3545" stroke-linejoin="round" stroke-miterlimit="1" points="52.437,185.834
78 	52.437,257.504 84.957,185.834 "/>
79 <polygon id="diez" fill="#E64A45" stroke="#E64A45" stroke-linejoin="round" stroke-miterlimit="1" points="84.957,114.166
80 	52.437,185.834 84.957,185.834 "/>
81 <polygon id="nueve" fill="#D44145" stroke="#D44145" stroke-linejoin="round" stroke-miterlimit="1" points="52.437,114.166
82 	52.437,185.834 84.957,114.166 "/>
83 <polygon id="ocho" fill="#FA5545" stroke="#FA5545" stroke-linejoin="round" stroke-miterlimit="1" points="84.957,42.497
84 	52.437,114.166 84.957,114.166 "/>
85 <polygon id="siete" fill="#FF5A45" stroke="#FF5A45" stroke-linejoin="round" stroke-miterlimit="1" points="52.437,42.497
86 	52.437,114.166 84.957,42.497 "/>
87 <polygon id="seis" fill="#AD2C45" stroke="#AD2C45" stroke-linejoin="round" stroke-miterlimit="1" points="52.437,185.834
88 	19.915,257.504 52.437,257.504 "/>
89 <polygon id="cinco" fill="#A82945" stroke="#A82945" stroke-linejoin="round" stroke-miterlimit="1" points="19.915,185.834
90 	19.915,257.504 52.437,185.834 "/>
91 <polygon id="cuatro" fill="#C13745" stroke="#C13745" stroke-linejoin="round" stroke-miterlimit="1" points="52.437,114.166
92 	19.915,185.834 52.437,185.834 "/>
93 <polygon id="tres" fill="#E64B45" stroke="#E64B45" stroke-linejoin="round" stroke-miterlimit="1" points="19.915,114.166
94 	19.915,185.834 52.437,114.166 "/>
95 <polygon id="dos" fill="#FF5945" stroke="#FF5945" stroke-linejoin="round" stroke-miterlimit="1" points="52.437,42.497
96 	19.915,114.166 52.437,114.166 "/>
97 <polygon id="uno" fill="#A62845" stroke="#A62845" stroke-linejoin="round" stroke-miterlimit="1" points="19.915,42.497
98 	19.915,114.166 52.437,42.497 "/>
99 </svg>

Ahora vamos a animar el SVG, y para ello vamos a utilizar animate.css creado por Dan Eden

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

Podemos bajarnos el archivo completo desde GitHub o podemos generar nuestro propio archivo, para ello vamos a create custom build y seleccionamos las animaciones que nos gusten, para ver en que consiste cada animación bastara con ponernos encima de ella y esperar a que se ejecute el efecto. En esta ocasión solamente nos vamos a quedar con bounceInRight *y *bounceInLeft, le damos a build it y ya tendremos listo para descargar nuestro archivo CSS.

  1 .animated {
  2 -webkit-animation-fill-mode:both;
  3 -moz-animation-fill-mode:both;
  4 -ms-animation-fill-mode:both;
  5 -o-animation-fill-mode:both;
  6 animation-fill-mode:both;
  7 -webkit-animation-duration:4s;
  8 -moz-animation-duration:4s;
  9 -ms-animation-duration:4s;
 10 -o-animation-duration:4s;
 11 animation-duration:4s;
 12 }
 13 
 14 .animated.hinge
 15 {-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}
 16 
 17 @-webkit-keyframes bounceInLeft {
 18 	0% {
 19 		opacity: 0;
 20 		-webkit-transform: translateX(-2000px);
 21 	}	60% {
 22 		opacity: 1;
 23 		-webkit-transform: translateX(30px);
 24 	}
 25 
 26 	80% {
 27 		-webkit-transform: translateX(-10px);
 28 	}
 29 
 30 	100% {
 31 		-webkit-transform: translateX(0);
 32 	}
 33 }
 34 
 35 @-moz-keyframes bounceInLeft {
 36 	0% {
 37 		opacity: 0;
 38 		-moz-transform: translateX(-2000px);
 39 	}
 40 
 41 	60% {
 42 		opacity: 1;
 43 		-moz-transform: translateX(30px);
 44 	}
 45 
 46 	80% {
 47 		-moz-transform: translateX(-10px);
 48 	}
 49 
 50 	100% {
 51 		-moz-transform: translateX(0);
 52 	}
 53 }
 54 
 55 @-o-keyframes bounceInLeft {
 56 	0% {
 57 		opacity: 0;
 58 		-o-transform: translateX(-2000px);
 59 	}
 60 
 61 	60% {
 62 		opacity: 1;
 63 		-o-transform: translateX(30px);
 64 	}
 65 
 66 	80% {
 67 		-o-transform: translateX(-10px);
 68 	}
 69 
 70 	100% {
 71 		-o-transform: translateX(0);
 72 	}
 73 }
 74 
 75 @keyframes bounceInLeft {
 76 	0% {
 77 		opacity: 0;
 78 		transform: translateX(-2000px);
 79 	}
 80 
 81 	60% {
 82 		opacity: 1;
 83 		transform: translateX(30px);
 84 	}
 85 
 86 	80% {
 87 		transform: translateX(-10px);
 88 	}
 89 
 90 	100% {
 91 		transform: translateX(0);
 92 	}
 93 }
 94 
 95 .bounceInLeft {
 96 	-webkit-animation-name: bounceInLeft;
 97 	-moz-animation-name: bounceInLeft;
 98 	-o-animation-name: bounceInLeft;
 99 	animation-name: bounceInLeft;
100 }
101 @-webkit-keyframes bounceInRight {
102 	0% {
103 		opacity: 0;
104 		-webkit-transform: translateX(2000px);
105 	}
106 
107 	60% {
108 		opacity: 1;
109 		-webkit-transform: translateX(-30px);
110 	}
111 
112 	80% {
113 		-webkit-transform: translateX(10px);
114 	}
115 
116 	100% {
117 		-webkit-transform: translateX(0);
118 	}
119 }
120 
121 @-moz-keyframes bounceInRight {
122 	0% {
123 		opacity: 0;
124 		-moz-transform: translateX(2000px);
125 	}
126 
127 	60% {
128 		opacity: 1;
129 		-moz-transform: translateX(-30px);
130 	}
131 
132 	80% {
133 		-moz-transform: translateX(10px);
134 	}
135 
136 	100% {
137 		-moz-transform: translateX(0);
138 	}
139 }
140 
141 @-o-keyframes bounceInRight {
142 	0% {
143 		opacity: 0;
144 		-o-transform: translateX(2000px);
145 	}
146 
147 	60% {
148 		opacity: 1;
149 		-o-transform: translateX(-30px);
150 	}
151 
152 	80% {
153 		-o-transform: translateX(10px);
154 	}
155 
156 	100% {
157 		-o-transform: translateX(0);
158 	}
159 }
160 
161 @keyframes bounceInRight {
162 	0% {
163 		opacity: 0;
164 		transform: translateX(2000px);
165 	}
166 
167 	60% {
168 		opacity: 1;
169 		transform: translateX(-30px);
170 	}
171 
172 	80% {
173 		transform: translateX(10px);
174 	}
175 
176 	100% {
177 		transform: translateX(0);
178 	}
179 }
180 
181 .bounceInRight {
182 	-webkit-animation-name: bounceInRight;
183 	-moz-animation-name: bounceInRight;
184 	-o-animation-name: bounceInRight;
185 	animation-name: bounceInRight;
186 }

Ahora que tenemos todo preparado tan solo nos queda animar el CSS. A las capas o polígonos pares le vamos a dar un bounceInRight y a las impares bounceInLeft.

Para no ir añadiendo la clase una a una a los diferentes polígonos que tiene el SVG podemos hacer lo siguiente y ahorrar tiempo, en Sublime nos vamos a Find y luego a Replace(comando + H en Mac – crtl + H en windows).

En Find What escribimos: < polygon (quitad el espacio anterior a polygon) Y en Replace Width: < polygon class=”animated bounceInRight” (quitad el espacio anterior a polygon)

replace

Le damos a Replace All y ya tenemos todas nuestros polígonos con la clase animated y bounceInRight, pero ahora esta todo con bounceInRight y como hemos dicho anteriormente solo los pares van a tener el efecto bounceInRight, así que ahora repetimos la anterior operación pero ahora en Find What pondremos: bounceInRight y en Replace Width pondremos bounceInLeft ahora vamos a utilizar Replace en lugar de Replace All, y solamente lo aplicaremos a los polígonos con número impar. Alternando clicks en Replace y Find completaremos fácilmente la operación.

Este es el código resultante:

 1 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 2    width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
 3 <polygon class="animated bounceInRight" id="cuarentayocho" fill="#C13745" stroke="#C13745" stroke-linejoin="round" stroke-miterlimit="1" points="
 4   280.085,185.834 247.564,257.504 280.085,257.504 "/>
 5 <polygon class="animated bounceInLeft" id="cuarentaysiete" fill="#861845" stroke="#861845" stroke-linejoin="round" stroke-miterlimit="1" points="
 6   247.564,185.834 247.564,257.504 280.085,185.834 "/>
 7 <polygon class="animated bounceInRight" id="cuarentayseis" fill="#931E45" stroke="#931E45" stroke-linejoin="round" stroke-miterlimit="1" points="
 8   280.085,114.166 247.564,185.834 280.085,185.834 "/>
 9 <polygon class="animated bounceInLeft" id="cuarentaycinco" fill="#B63145" stroke="#B63145" stroke-linejoin="round" stroke-miterlimit="1" points="
10   247.564,114.166 247.564,185.834 280.085,114.166 "/>
11 <polygon class="animated bounceInRight" id="cuarentaycuatro" fill="#B12E45" stroke="#B12E45" stroke-linejoin="round" stroke-miterlimit="1" points="
12   280.085,42.497 247.564,114.166 280.085,114.166 "/>
13 <polygon class="animated bounceInLeft" id="cuarentaytres" fill="#D64245" stroke="#D64245" stroke-linejoin="round" stroke-miterlimit="1" points="
14   247.564,42.497 247.564,114.166 280.085,42.497 "/>
15 <polygon class="animated bounceInRight" id="cuarentaydos" fill="#9A2245" stroke="#9A2245" stroke-linejoin="round" stroke-miterlimit="1" points="
16   247.564,185.834 215.042,257.504 247.564,257.504 "/>
17 <polygon class="animated bounceInLeft" id="cuarentayuno" fill="#B32F45" stroke="#B32F45" stroke-linejoin="round" stroke-miterlimit="1" points="
18   215.042,185.834 215.042,257.504 247.564,185.834 "/>
19 <polygon class="animated bounceInRight" id="cuarenta" fill="#D13F45" stroke="#D13F45" stroke-linejoin="round" stroke-miterlimit="1" points="247.564,114.166
20   215.042,185.834 247.564,185.834 "/>
21 <polygon class="animated bounceInLeft" id="treintaynueve" fill="#E14845" stroke="#E14845" stroke-linejoin="round" stroke-miterlimit="1" points="
22   215.042,114.166 215.042,185.834 247.564,114.166 "/>
23 <polygon class="animated bounceInRight" id="treintayocho" fill="#DE4645" stroke="#DE4645" stroke-linejoin="round" stroke-miterlimit="1" points="247.564,42.497
24   215.042,114.166 247.564,114.166 "/>
25 <polygon class="animated bounceInLeft" id="treintaysiete" fill="#E54A45" stroke="#E54A45" stroke-linejoin="round" stroke-miterlimit="1" points="
26   215.042,42.497 215.042,114.166 247.564,42.497 "/>
27 <polygon class="animated bounceInRight" id="treintayseis" fill="#962045" stroke="#962045" stroke-linejoin="round" stroke-miterlimit="1" points="
28   215.042,185.834 182.521,257.504 215.042,257.504 "/>
29 <polygon class="animated bounceInLeft" id="treintaycinco" fill="#BC3445" stroke="#BC3445" stroke-linejoin="round" stroke-miterlimit="1" points="
30   182.521,185.834 182.521,257.504 215.042,185.834 "/>
31 <polygon class="animated bounceInRight" id="treintaycuatro" fill="#DD4645" stroke="#DD4645" stroke-linejoin="round" stroke-miterlimit="1" points="
32   215.042,114.166 182.521,185.834 215.042,185.834 "/>
33 <polygon class="animated bounceInLeft" id="treintaytres" fill="#FF5E45" stroke="#FF5E45" stroke-linejoin="round" stroke-miterlimit="1" points="
34   182.521,114.166 182.521,185.834 215.042,114.166 "/>
35 <polygon class="animated bounceInRight" id="treintaydos" fill="#FF6045" stroke="#FF6045" stroke-linejoin="round" stroke-miterlimit="1" points="215.042,42.497
36   182.521,114.166 215.042,114.166 "/>
37 <polygon class="animated bounceInLeft" id="treintayuno" fill="#FF5B45" stroke="#FF5B45" stroke-linejoin="round" stroke-miterlimit="1" points="182.521,42.497
38   182.521,114.166 215.042,42.497 "/>
39 <polygon class="animated bounceInRight" id="treinta" fill="#B53045" stroke="#B53045" stroke-linejoin="round" stroke-miterlimit="1" points="182.521,185.834
40   150,257.504 182.521,257.504 "/>
41 <polygon class="animated bounceInLeft" id="veintinueve" fill="#D64245" stroke="#D64245" stroke-linejoin="round" stroke-miterlimit="1" points="150,185.834
42   150,257.504 182.521,185.834 "/>
43 <polygon class="animated bounceInRight" id="veintiocho" fill="#FF6045" stroke="#FF6045" stroke-linejoin="round" stroke-miterlimit="1" points="182.521,114.166
44   150,185.834 182.521,185.834 "/>
45 <polygon class="animated bounceInLeft" id="veintisiete" fill="#FF6D45" stroke="#FF6D45" stroke-linejoin="round" stroke-miterlimit="1" points="150,114.166
46   150,185.834 182.521,114.166 "/>
47 <polygon class="animated bounceInRight" id="veintiseis" fill="#FF8A45" stroke="#FF8A45" stroke-linejoin="round" stroke-miterlimit="1" points="182.521,42.497
48   150,114.166 182.521,114.166 "/>
49 <polygon class="animated bounceInLeft" id="veinticinco" fill="#FF9245" stroke="#FF9245" stroke-linejoin="round" stroke-miterlimit="1" points="150,42.497
50   150,114.166 182.521,42.497 "/>
51 <polygon class="animated bounceInRight" id="veinticuatro" fill="#C33845" stroke="#C33845" stroke-linejoin="round" stroke-miterlimit="1" points="150,185.834
52   117.479,257.504 150,257.504 "/>
53 <polygon class="animated bounceInLeft" id="veintitres" fill="#D24045" stroke="#D24045" stroke-linejoin="round" stroke-miterlimit="1" points="117.479,185.834
54   117.479,257.504 150,185.834 "/>
55 <polygon class="animated bounceInRight" id="veintidos" fill="#FF5945" stroke="#FF5945" stroke-linejoin="round" stroke-miterlimit="1" points="150,114.166
56   117.479,185.834 150,185.834 "/>
57 <polygon class="animated bounceInLeft" id="veinteuno" fill="#FF8045" stroke="#FF8045" stroke-linejoin="round" stroke-miterlimit="1" points="117.479,114.166
58   117.479,185.834 150,114.166 "/>
59 <polygon class="animated bounceInRight" id="veinte" fill="#FFFC45" stroke="#FFFC45" stroke-linejoin="round" stroke-miterlimit="1" points="150,42.497
60   117.479,114.166 150,114.166 "/>
61 <polygon class="animated bounceInLeft" id="diecinueve" fill="#FFA845" stroke="#FFA845" stroke-linejoin="round" stroke-miterlimit="1" points="117.479,42.497
62   117.479,114.166 150,42.497 "/>
63 <polygon class="animated bounceInRight" id="dieciocho" fill="#BB3345" stroke="#BB3345" stroke-linejoin="round" stroke-miterlimit="1" points="117.479,185.834
64   84.957,257.504 117.479,257.504 "/>
65 <polygon class="animated bounceInLeft" id="diecisiete" fill="#C93B45" stroke="#C93B45" stroke-linejoin="round" stroke-miterlimit="1" points="84.957,185.834
66   84.957,257.504 117.479,185.834 "/>
67 <polygon class="animated bounceInRight" id="dieciseis" fill="#F55345" stroke="#F55345" stroke-linejoin="round" stroke-miterlimit="1" points="117.479,114.166
68   84.957,185.834 117.479,185.834 "/>
69 <polygon class="animated bounceInLeft" id="quince" fill="#FF6545" stroke="#FF6545" stroke-linejoin="round" stroke-miterlimit="1" points="84.957,114.166
70   84.957,185.834 117.479,114.166 "/>
71 <polygon class="animated bounceInRight" id="catorce" fill="#FFB245" stroke="#FFB245" stroke-linejoin="round" stroke-miterlimit="1" points="117.479,42.497
72   84.957,114.166 117.479,114.166 "/>
73 <polygon class="animated bounceInLeft" id="trece" fill="#FF8545" stroke="#FF8545" stroke-linejoin="round" stroke-miterlimit="1" points="84.957,42.497
74   84.957,114.166 117.479,42.497 "/>
75 <polygon class="animated bounceInRight" id="doce" fill="#B12E45" stroke="#B12E45" stroke-linejoin="round" stroke-miterlimit="1" points="84.957,185.834
76   52.437,257.504 84.957,257.504 "/>
77 <polygon class="animated bounceInLeft" id="once" fill="#BD3545" stroke="#BD3545" stroke-linejoin="round" stroke-miterlimit="1" points="52.437,185.834
78   52.437,257.504 84.957,185.834 "/>
79 <polygon class="animated bounceInRight" id="diez" fill="#E64A45" stroke="#E64A45" stroke-linejoin="round" stroke-miterlimit="1" points="84.957,114.166
80   52.437,185.834 84.957,185.834 "/>
81 <polygon class="animated bounceInLeft" id="nueve" fill="#D44145" stroke="#D44145" stroke-linejoin="round" stroke-miterlimit="1" points="52.437,114.166
82   52.437,185.834 84.957,114.166 "/>
83 <polygon class="animated bounceInRight" id="ocho" fill="#FA5545" stroke="#FA5545" stroke-linejoin="round" stroke-miterlimit="1" points="84.957,42.497
84   52.437,114.166 84.957,114.166 "/>
85 <polygon class="animated bounceInLeft" id="siete" fill="#FF5A45" stroke="#FF5A45" stroke-linejoin="round" stroke-miterlimit="1" points="52.437,42.497
86   52.437,114.166 84.957,42.497 "/>
87 <polygon class="animated bounceInRight" id="seis" fill="#AD2C45" stroke="#AD2C45" stroke-linejoin="round" stroke-miterlimit="1" points="52.437,185.834
88   19.915,257.504 52.437,257.504 "/>
89 <polygon class="animated bounceInLeft" id="cinco" fill="#A82945" stroke="#A82945" stroke-linejoin="round" stroke-miterlimit="1" points="19.915,185.834
90   19.915,257.504 52.437,185.834 "/>
91 <polygon class="animated bounceInRight" id="cuatro" fill="#C13745" stroke="#C13745" stroke-linejoin="round" stroke-miterlimit="1" points="52.437,114.166
92   19.915,185.834 52.437,185.834 "/>
93 <polygon class="animated bounceInLeft" id="tres" fill="#E64B45" stroke="#E64B45" stroke-linejoin="round" stroke-miterlimit="1" points="19.915,114.166
94   19.915,185.834 52.437,114.166 "/>
95 <polygon class="animated bounceInRight" id="dos" fill="#FF5945" stroke="#FF5945" stroke-linejoin="round" stroke-miterlimit="1" points="52.437,42.497
96   19.915,114.166 52.437,114.166 "/>
97 <polygon class="animated bounceInLeft" id="uno" fill="#A62845" stroke="#A62845" stroke-linejoin="round" stroke-miterlimit="1" points="19.915,42.497
98   19.915,114.166 52.437,42.497 "/>
99 </svg>

Si ejecutamos el HTML en el navegador vamos a ver que la animación es demasiado rápida. Así que vamos a corregir el tiempo en el CSS, simplemente vamos a .animated y sustituimos 1s por el tiempo que nosotros queramos, en este caso lo cambiaremos por 4s.

 1 .animated {
 2 -webkit-animation-fill-mode:both;
 3 -moz-animation-fill-mode:both;
 4 -ms-animation-fill-mode:both;
 5 -o-animation-fill-mode:both;
 6 animation-fill-mode:both;
 7 -webkit-animation-duration:4s;
 8 -moz-animation-duration:4s;
 9 -ms-animation-duration:4s;
10 -o-animation-duration:4s;
11 animation-duration:4s;
12 }

Y ya tenemos lista nuestra animación, aquí podéis ver el resultado final.

Un último apunte final, podemos modificar el tamaño del SVG en cualquier momento y sin riesgo a perder calidad, tan solo tenemos que modificar el width y el height en el HTML.

1 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
2    width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">

Enlaces de interés:

Flat Surface Shader
Animate.css
GitHub animated.css
GitHub flat-surface-shade

SCALABLE, un libro sobre SVGA lo largo de 15 capítulos, 120 páginas y más de 70 ejemplos vamos a ver todo lo que podemos hacer con SVG. Tu pones el precio, disponible desde 0$ para descargar desde LeanPub(PDF, ePUB y MOBI).