Animando filtros SVG con SMIL

Archivado en: SMIL SVG

Continuo experimentando con SVG, esta vez añadiendo animaciones con SMIL a los filtros.

Hace unos meses empece a experimentar con animaciones en los filtros, aprovechando un Pen *en *CodePen donde mostraba los efectos de los filtros **SVG **sobre las imágenes añadi una pequeña animación al filtro.

 

Se aprecia mejor en CodePen

SMIL

Si alguien no esta familiarizado con SMIL le recomiendo antes de nada leer Animation SMIL SVG y también el resto de post que están en la categoría SMIL.

Experimento

Para el experimento he cogido un pattern de SVGeneration.

A continuación podéis ver el resultado.

 

Animando feTurbulence

La primera animación recae sobre el filtro feTurbulence y como podeis ver en el código vamos a animar baseFrequency que es la frecuencia del ruido, si solo le damos un valor este se aplica para las coordenadas X e Y, si le damos dos valores el primero sera para la coordenada X y el segundo para la coordenada Y. La siguiente animación recae sobre numOctaves que representa el parámetro del ruido, cuanto mas valor tenga mas estrecho y complejo sera el resultado.

Vamos a ver el código

1 <animate    attributeName="numOctaves"
2             values="0;5;4;3;2;7;8;9;10;1;2"
3             dur="20s"
4             repeatCount="indefinite"/>
5 <animate    attributeName="baseFrequency"
6             values="0;5;4;3;2;7;8;9;10;1;2"
7             dur="20s"
8             repeatCount="indefinite"/>

Animando feMorphology

Ahora vamos con la animación que he aplicado a feMorphology, este filtro se utiliza para conseguir el efecto de agrandar o empequeñecer la imagen, tiene dos valores erode y dilate, en este caso he animado radius que se encarga del radio que se aplica al filtro.

1 <animate    attributeName="radius"
2             values="1;2;3;4;5;6;7;8;9;1;9;"
3             dur="20s"
4             repeatCount="indifinite"/>

Si queréis obtener otro resultado simplemente tenéis que modificar los values de las tres animaciones. Si tenéis cuenta en CodePen podéis hacer un fork y ver los resultados, si alguien se anima que me avise por twitter y me voy añadiendo los fork.

Aquí os dejo el resto del código, como podéis ver son muy pocas líneas para un resultado bastante lisérgico.

 1 <svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox="0 0 100% 100%">
 2     <filter color-interpolation-filters='sRGB' id='filter3115'>
 3             <feTurbulence type='fractalNoise' numOctaves='1' baseFrequency='0.9' id='feTurbulence3117'>
 4                 <animate attributeName="numOctaves" values="0;5;4;3;2;7;8;9;10;1;2" dur="20s" repeatCount="indefinite"/>
 5                 <animate attributeName="baseFrequency" values="0;5;4;3;2;7;8;9;10;1;2" dur="20s" repeatCount="indefinite"/>
 6             </feTurbulence>
 7             <feColorMatrix result='result5' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 6 -4.15' id='feColorMatrix3119'/>
 8             <feComposite in2='result5' operator='in' in='SourceGraphic' result='result6' id='feComposite3121' />
 9             <feMorphology in='result6' operator='dilate' radius='9' result='result3' id='feMorphology3123'>
10                 <animate attributeName="radius" values="1;2;3;4;5;6;7;8;9;1;9" dur="20s" repeatCount="indefinite"/>
11             </feMorphology>
12         </filter>
13     <rect width='100%' height='100%' x='0' y='0' id='rect2985' fill='#000000'/>
14     <rect width='100%' height='100%' x='0' y='0' id='rect2985' filter="url(#filter3115)" fill="#611748">
15         <animate attributeName="width" values="90%; 80%; 50%; 60%; 80%; 10%" begin="1s" dur="10s"/>
16         <animate attributeName="fill" dur="20s" values="#1abc9c; #16a085; #3498db; #2980b9; #9b59b6; #8e44ad;" begin="1s" repeatCount="indefinite"/>
17     </rect>
18 </svg>
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).
Artículo posterior Artículo anterior