CSS fondo animado con formas SVG

Vamos a replicar un ejercicio que he visto en GITHUB dónde básciamente se aprende a crear patrones SVG y se empleand en formas repedias rotando en el fondo de la web creando una ilusión de lámpara de lava, o cortinilla de Austin Powers

Contenido

Hoy te mostraré cómo realizar esta animación de fondo, totalmente responsive con formas SVG.

 

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.

Scroll al inicio