SVG animado: Corazón palpitante
Las iniciales SVG correspnde a Scalable Vector Gráfics, son imágenes ampliables sin perder calidad porque están creadas mediante funciones matemáticas. Se pueden crear directamente en una página web, tienen un atributo denominado path que es quien define la forma del gráfico.
En este ejemplo aprovechamos que además estos elementos aceptan las animaciones, y creamos un corazón que va a estar latiendo en nuestra página, sin necesidad de usar Javascript: solo CSS
El código HTML
El código HTML es de lo más simple: un elemento svg con el tamaño dado por la viewBox, el relleno (rojo) el path para definir la imagen del corazón y por último la animación en la que se define la propiedad que va a cambiar y la forma en que va a hacerlo. En nuestro caso cambiamos el tamaño en ciclos de 1 segundo y de manera continua (repeatCount= indefinite). Ojo que el viewBox realmente define el tamaño del puerto de visualización, el path se dibuja con su tamaño en este puerto. Si es muy grande veremos el dibujo más pequeño. Pruébalo para ver los efectos al cambiar valores.
<svg viewBox="0 0 100 100" fill="red" xmlns="http://www.w3.org/2000/svg">
<path d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z">
<animatetransform attributeName="transform" attributeType="XML" type="scale" dur="1s" values="0.75;0.8;1;0.9; 0.75" keyTimes="0;0.45;0.5;0.75;1" repeatCount="indefinite">
</animatetransform>
</path>
</svg>
El estilo CSS
El estilo CSS es más que nada para colocar el elemento en pantalla y definir que el centro de la transformación se situe en el centro del path.
svg {
height: 100px;
width: 100px;
}
svg *{
transform-box: fill-box;
transform-origin: center;
}