La función shape()

En ciertos casos es posible que tengas la necesidad de definir formas complejas desde HTML/CSS sin depender de imágenes externas o librerías de terceros. Hasta ahora, no era posible (o bastante complejo), sin embargo, mediante la función shape() CSS nos brinda un abanico super amplio de opciones.

La función `shape()`

Mediante la función shape() de CSS, se pueden definir formas complejas y responsive utilizando propiedades como clip-path u offset-path (por ejemplo). Hasta ahora, esto sólo era posible hacerse con SVG, pero ahora tenemos una forma prácticamente equivalente de hacerlo en CSS.

Por ejemplo, observa el siguiente código, donde tenemos un cuadrado violeta, que encima tiene un cuadrado rosa que será recortado utilizando la propiedad clip-path y la función shape():

shape( from 0 0, hline to calc(50% - 50px), arc by calc(2 * 50px) 0 of 50px, hline to 100%, vline to 100%, hline to 0, close )

Observa que dentro de la función shape(), tenemos varios comandos separados por comas, donde cada comando realiza una acción:

1️⃣ from Establece el punto donde comienza la forma.
2️⃣ hline Realiza una línea horizontal.
3️⃣ arc Crea un arco.
4️⃣ hline Realiza una línea horizontal.
5️⃣ vline Realiza una línea vertical.
6️⃣ hline Realiza una línea horizontal.
7️⃣ close Cierra la forma.

Comandos de trazos con `shape()`

En las funciones shape() podemos utilizar una gran variedad de comandos, pero algunos de los principales serían los siguientes:

1️⃣ El comando from
2️⃣ El comando move
3️⃣ El comando line
4️⃣ El comando hline o vline
5️⃣ El comando close

Mover Lineas

Comandos de movimiento

Veamos como podemos movernos a un punto concreto sin realizar ningun trazo o curva:

Comando	Descripción	Equivalencia con SVG
`from`	Establece un punto de inicio. Utilízalo para comenzar.
`move to`	Se mueve al punto indicado (absoluto), sin dibujar.	`M`
`move by`	Se mueve la distancia indicada (relativa), sin dibujar.	`m`
`close`	Cierra el trazo y vuelve al punto de inicio.	`Z`

Observa que en la mayoría de los comandos se puede indicar to (movimiento absoluto) o by (movimiento relativo). Mientras que en el primero pones un punto exacto, en el segundo pones una distancia a partir del punto en el que te encuentras actualmente.

Comandos de trazo recto

Los siguientes son comandos para realizar trazos en línea recta:

Comando	Descripción	Equivalencia con SVG
`line to`	Traza una linea recta al punto indicado (absoluto).	`L`
`hline to`	Traza una linea recta horizontal hasta el punto indicado (absoluto).	`H`
`vline to`	Traza una linea recta vertical hasta el punto indicado (absoluto).	`V`

Recuerda que en lugar de to, también puedes establecer by e indicar valores relativos basados en el punto actual en el que te encuentras.

También ten en cuenta que , a parte de longitudes o distancias, puede ser left, center o right (y x-start o x-end si prefieres valores lógicos). Por otro lado, puede tener los valores top, center o bottom (y y-start o y-end si prefieres valores lógicos).

shape( from 50% 50%, line to 100% 50%, line to 100% 100%, line to 50% 100%, close )

Comandos de curvas con `shape()`

Además de los trazos de líneas rectas, también podemos hacer curvas, aunque aquí la cosa se complica un poco. Se realizan a través de curvas Bézier cúbicas. Hay de tres tipos:

1️⃣ El comando curve
2️⃣ El comando smooth
3️⃣ El comando arc

Curvas Curvas simétricas Arcos

Comandos de curvas Bézier cúbicas

El comando curve nos permite crear curvas bézier cúbicas, utilizando puntos de control.

Comando	Descripción	Equiv. con SVG
`curve to`	Curva hasta (x,y), reutilizando el punto anterior.	`C`
`curve to` `with`	Curva hasta (x,y), usando control A (x,y).	`C`
`curve to` `with` /	Curva hasta (x,y), usando control A (x,y) y B (x,y).	`C`

Nuevamente, en lugar de to podemos utilizar by para indicar valores o distancias relativas.

shape( from 50% 50%, curve to 100% 50% with 75% 75%, curve to 100% 0% with 75% 25%, close )

Comandos de curvas Bézier simétricas

Con el comando curve que hemos visto, escribimos explícitamente los puntos de control. Sin embargo, con smooth no hace falta indicarlo, el primer punto de control se calcula automáticamente a partir del segmento anterior.

Comando	Descripción	Equivalencia con SVG
`smooth to`	Curva simétrica hasta (x,y), reutilizando el punto anterior.	`S`
`smooth to` `with`	Curva hasta el punto (x,y), usando control A (x,y).	`S`

Nuevamente, en lugar de to podemos utilizar by para indicar valores o distancias relativas.

shape( from 50% 50%, curve to 75% 50% with 75% 75%, smooth to 25% 25%, close )

Segmentos (circunferencia o elípticos)

Con el comando arc podemos crear segmentos de circunferencia o elípticos. Veamos los comandos:

Comando	Descripción	Equivalencia con SVG
`arc to`	Arco implícito. El navegador calcula el radio y la forma.	`A`
`arc to` `of`	Arco circular con radio `r` entre el punto actual y (x,y).	`A`
`arc to` `of`	Arco elíptico con radios `rx` y `ry`.	`A`

Nuevamente, en lugar de to podemos utilizar by para indicar valores o distancias relativas.

En los casos anteriores de arc podemos establecer alguna de las palabras clave siguiente para personalizarlo:

Extra	Descripción
`cw` \| `ccw`	Dirección del trazo. `cw` = sentido de las agujas del reloj, `ccw` = sentido contrario.
`large` \| `small`	Elige el segmento más largo o más corto.
`rotate`	Gira el sistema de coordenadas del arco (no de la curva).

shape( from 25% 25%, line to 75% 25%, line to 100% 100%, arc to 0% 100% of 75%, close )

Todos estos comandos tienen su propia equivalencia en el lenguaje SVG, ya que vienen portados de trayectos <path> que se utilizan mediante el atributo d: