Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. SVG

Cómo crear un corazón palpitante animado con SVG

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

¡Es el día de San Valentín! así que entremos en ambiente, teniendo pensamientos rosas y emociones cálidas en el proceso, y vamos a codificar un sencillo corazón palpitante animado con SVG.

Esto es lo que vamos a crear:

Este es un excelente ejercicio para familiarizarte con la sintaxis de SVG y la animación auténtica. Vamos a tomar un corazón SVG creado previamente, recordaremos cómo funciona el viewBox, y luego añadiremos un elemento animateTransform para controlar el movimiento de los latidos. ¡Comencemos!

1. Crea un icono de corazón

En la herramienta vectorial de tu elección, dibuja un icono simple en forma de corazón. No tiene que ser perfecto, pero hazlo con un trazo continuo para mayor facilidad. He creado el mío en un lienzo de 100x100px y lo rellené casi completamente.

illustrated heart icon

Descarga mis versiones de Illustrator y SVG si quieres usarlas.

Copia y pega en un editor de texto

En la mayoría de las aplicaciones vectoriales de hoy en día puedes copiar objetos y pegar el código SVG resultante en un editor de texto. Así que haz eso con el objeto en forma de corazón. Regresaremos a este fragmento de código SVG en un momento.

2. Comienza a escribir SVG

En Codepen (o en un archivo HTML en blanco) comienza escribiendo la estructura básica de un elemento SVG:

Aquí le hemos asignado a nuestro SVG el mismo alto y ancho de nuestro dibujo original. También hemos establecido el viewBox en 0 0 100 85. Esto significa que la ventana a través de la que estamos viendo nuestro SVG comienza en las coordenadas 0 0 (superior izquierda) y mide 100x85px, por lo que se ajusta perfectamente a nuestro SVG.

Para recordar cómo funciona el elemento viewBox te recomiendo que consultes esta explicación de Kezz Bracey:

Para ver claramente con qué estás trabajando, agrega una regla de CSS para colorear el fondo del SVG:

También vamos a centrar lo que estamos viendo, a través del uso de flexbox:

3. Agrega el trazo en forma de corazón

Ahora necesitamos anidar un elemento path en el SVG. Comienza con un elemento path vacío, con un color fill y un valor d vacío:

El valor d define una ruta trazada, así que vamos a añadirle las coordenadas de nuestro trazo. En el fragmento de código SVG que pegaste en un editor de texto, copia todo lo del atributo d y pégalo en nuestro atributo vacío. Deberás terminar con una cadena desordenada que se ve así:

Todo eso habrá creado lo siguiente:

4. Deja que tu corazón crezca

Quiero un corazón más grande.

Al duplicar los atributos SVG del ancho y el alto con width="200" height="170" vamos a duplicar el tamaño del objeto completo. O podemos escalar todo en un 150% width="150" height="127". U otra alternativa. No necesitamos tocar los valores del viewBox, ya que se mantendrán en relación al Viewport que acabamos de cambiar. 

5. Agrega un toque de animación

Para animar el corazón vamos a usar un elemento animateTransform, anidado dentro de nuestro SVG.

Comienza añadiendo el elemento dentro del SVG, como hermano del elemento path:

Esto animará al elemento padre, es decir: el <svg> completo. Esto no será adecuado en muchas situaciones, y será mejor animar los elementos dentro del <svg>, pero este enfoque funciona bien para nosotros. Para ver un repaso sobre el funcionamiento de animateTransform, Kezz (como siempre) te apoya:

Los atributos que hemos usado son razonablemente fáciles de comprender. Estamos creando una transformación de escala, con una duración de 1s, que se repetirá indefinidamente.

Agrega valores a la transformación

Ahora necesitamos añadir una lista de valores, para que sepa por cuánto debe animar:

Así que aquí el corazón comienza con un tamaño normal (1), luego se escala a 1.5 del tamaño normal, luego se reduce un poco a 1.25, luego regresa a 1.5, y así sucesivamente. Estos valores nos proporcionan el efecto de palpitación.

Nota: cada valor toma una parte igual del tiempo de 1 segundo que hemos establecido. Como puedes imaginar, el movimiento parecerá acelerarse y desacelerarse dependiendo de cuánto escalado necesite realizar para cada paso.

Conclusión

Tengo que ser honesto, ¡me encanta este resultado final! es una animación simple pero efectiva, y nos proporciona la oportunidad perfecta de practicar nuestras habilidades en SVG. Con un fondo de color lavanda, aquí está el resultado final (¡ve a CodePen y dale algunos corazones!).

Más del encantador SVG en Diseño Web de Tuts

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.