Hoy te mostraré cómo realizar esta animación de fondo, totalmente responsive con formas SVG.
See the Pen Fondo animado con formas SVG by JLAU (@jlurosa) on CodePen.
Da la ilusión de las mantas que se transforman al azar. Pero de hecho, estamos rotando cuatro formas estáticas de SVG con CSS.
Paso 1: Crear formas
Primero, dibujan formas. Estoy usando Illustrator pero cualquier editor vector con soporte de exportación SVG funciona.
Comience creando un lienzo cuadrado. Lo tengo 100 x 100px, pero ya que estamos haciendo una imagen SVG, se brilla para cualquier tamaño de pantalla sin perder calidad. Por lo tanto, el tamaño de píxeles no importa.
blank canvas
Necesitarás dos pares de formas redondeadas. El número de formas no importa mucho; solo necesitan ser circulares y bien cortadas por el portal de vistas.
shapes to animate
Además, agregue círculos a los puntos centrales. No se quedarán en la imagen final; son una manera fácil de conseguir las coordenadas de los puntos de origen para la rotación de formas.
shapes to animate + circles
No nos importan los estilos y los colores en este punto. Tenemos que reunir sólo las formas de Illustrator. Así que vamos a exportar toda la imagen como archivo .svg.
Paso 2: Preparar código SVG
Aquí está el código svg exportado de Illustrator:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M37-5C25.1-14.7,5.7-19.1-9.2-10-28.5,1.8-32.7,31.1-19.8,49c15.5,21.5,52.6,22,67.2,2.3C59.4,35,53.7,8.5,37-5Z" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
<path d="M20.6,4.1C11.6,1.5-1.9,2.5-8,11.2-16.3,23.1-8.2,45.6,7.4,50S42.1,38.9,41,24.5C40.2,14.1,29.4,6.6,20.6,4.1Z" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
<path d="M105.9,48.6c-12.4-8.2-29.3-4.8-39.4.8-23.4,12.8-37.7,51.9-19.1,74.1s63.9,15.3,76-5.6c7.6-13.3,1.8-31.1-2.3-43.8C117.6,63.3,114.7,54.3,105.9,48.6Z" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
<path d="M102,67.1c-9.6-6.1-22-3.1-29.5,2-15.4,10.7-19.6,37.5-7.6,47.8s35.9,3.9,44.5-12.5C115.5,92.6,113.9,74.6,102,67.1Z" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
<circle cx="13.2" cy="25.6" r="1.6" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
<circle cx="84.7" cy="93.3" r="1.7" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
</svg>
El código puede verse diferente dependiendo del editor gráfico que utilice y exporte la configuración. De todos modos, tenemos que limpiarlo eliminando todos los estilos heredados del editor gráfico. Los únicos elementos que deben permanecer son:
el viewBox atributo para <svg>
<path>elementos para las mantas y sus atributos
adicionales <circle>elementos
Una vez que tengamos un código mínimo, podemos incrustarlo en la página HTML y configurar la imagen en pantalla completa.
