CSS en lugar de SVG: creación, animación y transformación de formas

Cuando se trata de formas y animaciones complejas, SVG suele ser el formato de elección, y hay una razón para ello. Sin embargo, gracias a los nuevos atributos CSS3, puede crear e incluso animar formas además de rectángulos y círculos, sin necesidad de ningún SVG.

Formas complejas a través de «clip-path».

El atributo CSS3 «clip-path» le permite recortar elementos en (casi) cualquier forma que desee. Para ello, están disponibles las formas geométricas básicas “recuadro()” para un rectángulo, “elipse()” y “círculo()” para elipse y círculo, así como “polígono()” para formas poligonales.

Cuando se trata de mostrar una parte rectangular o circular simple de una imagen o un elemento HTML, «recuadro ()», «elipse ()» y «círculo ()» son buenas opciones. La función “polygon()” es la más interesante, ya que se utiliza para crear formas poligonales.

div {
  clip-path: polygon(50% 0%, 65.5% 32.9%, 100% 38.2%, 75% 63.8%, 80.9% 100%, 50% 82.9%, 19.1% 100%, 25% 63.8%, 0% 38.2%, 34.5% 32.9%);
  width: 300px;
  height: 300px;
}

Cuando se utiliza «polígono()», se definen y dividen mediante comas tantos pares de coordenadas como desee. No solo se pueden introducir valores absolutos sino también porcentuales. Esto viene con la ventaja de que puede establecer el ancho y el alto usando los atributos CSS «ancho» y «alto».

La forma definida en el ejemplo es una estrella. Como las coordenadas se definen relativamente, es fácil alterar el ancho y la altura del formulario.

Animación de un formulario a través de «transición».

El atributo «transición» o el atributo «animación» cuando se combinan con la regla «@keyframes» le da la opción de crear una transición animada entre dos formas definidas con «clip-path».

Para eso, define una pseudo-clase usando “: es difícil definir el hover” e ingresa a la etapa final del polígono. Aquí, es importante que la cantidad de coordenadas en la forma de origen y final sean idénticas.

div:hover {
  clip-path: polygon(50% 0%, 80.9% 7.2%, 97.5% 33.7%, 100% 64.6%, 79.4% 88.1%, 50% 100%, 20.6% 88.1%, 0% 64.6%, 2.5% 33.7%, 19.1% 7.2%);
}

Tan pronto como hay demasiado o muy poco de un par de coordenadas, la transición animada deja de funcionar. En cambio, las dos formas cambian sin animación.

Crear formas en Illustrator

Es difícil definir las coordenadas usted mismo. Por lo tanto, es más fácil y útil simplemente dibujar la forma en Illustrator u otro programa de dibujo que conozca la exportación SVG. Si desea ingresar los datos de la forma como valores porcentuales relativos en la función «polígono()», la forma debe tener un ancho o una altura de 100 píxeles.

Posteriormente, exporte el dibujo como SVG y extraiga las coordenadas. Asegúrate de configurar un polígono. El formulario no debe contener curvas Bézier. Se debe colocar un elemento “” en el código fuente SVG.

Mientras que la función CSS «polígono ()» separa los pares de coordenadas mediante comas y los valores individuales de los pares mediante espacios, es exactamente lo contrario para el formato SVG. Por lo tanto, debe intercambiar la coma y el espacio y asignar un símbolo de porcentaje a los valores.

<polygon points="50,0 65.5,32.9 100,38.2 75,63.8 80.9,100 50,82.9 19.1,100 25,63.8 0,38.2 34.5,32.9 "/>

El ejemplo muestra cómo se muestran las coordenadas en la fuente SVG.

Ventajas y desventajas de las formas CSS a través de «clip-path»

Tanto la variante CSS vía “clip-path”, como las opciones SVG para la creación de formularios complejos tienen ventajas y desventajas. Después de que Google anunció que Chrome ya no admitirá animaciones SVG a través de SMIL, la transformación de formas SVG solo es posible mediante JavaScript.

La combinación del atributo CSS «clip-path» y el atributo «transition» permite transiciones de formulario animadas sin JavaScript.

Una desventaja de la «ruta de recorte» es que solo son posibles los polígonos y no hay rutas que incluyan curvas Bézier. Aquí es donde SVG tiene una ventaja, ya que el elemento «» no tiene problemas con los arcos, las muescas y la combinación de múltiples formas.

Ejemplo en Codepen

• CSS Polígono y Animación

(dpe)