CLIP PATH es como se denomina a crear máscaras de recorte en diseño web. Puede realizarse mediante código en css ( un cuadrado, círculo, polígono… ) o desde css señalando que svg ( cargado en el html) usar como máscara.

Un ejemplo en este enlace no permite manipular un poligono sobre un canvas y obtener el código css apropiado.

Ejemplo 1

Para este ejemplo hemos puesto una galeria con varias imágenes, y en el contenido de la página hemos escrito un poco de css, inspecciona el código.

Para el primer ejemplo hemos usado

clip-path: polygon(...);

poniendo los puntos/coordenadas que obtenía del enlace anterior

Ejemplo 2

Para el segundo ejemplo, he ido a Illustrator, creado una capa cuadrada y creado una forma que llegaba hasta los límites del cuadro y exportado como csv ( teniendo relleno en negro y sin grosor de trazo ). He abierto el código en sublimetext ( un editor de código ) y me he centrado en el path generado.



He creado una capa svg como código html, en la cual el svg mide el alto y ancho definido en illustrator, junto attributo viewbox . Encapsulo esa capa svg en un div o similar con altura 0px y overflow hidden. La capa clipPath tiene el atributo clipPathUnits=»objectBoundingBox» y ponemos un id para luego referenciarlo como máscara en css.

La capa del path le aplicamos un estilo transform scale, en la cual el valor va a ser horizontalmente 1/ ancho de la imagen en illustrator, lo que hubiera sido el ancho del viewbox. Lo mismo verticalmente.En mi caso en Illustrator fue 800×800, por eso la formula con calc empleada.

#mancha1{ transform : scale(calc(1/800),calc(1/800) ) ;}

Ejemplo del código entero para definir el css :

Y para asignar esta forma como máscara:

clip-path: url(#mancha1);

Donde lo que cambia es el id dado en el html a la capa clipPath

Ejemplo 3

Es como el anterior, creando otro cilpPath y path, con distinto id pero misma lógica de atributos y transform scale, la magia esta que en Ilustrator al crear la forma tenia agujeros y era una sola forma.

Imagen 4 no aplicamos nada

Imágenes 5 y 6

Aprovechamos los campos en la galería, añadiendo una clase y atributos html que detecta javascript.

class="cb-mask-morph" data-morph-mask="cb-mask-square-01" data-morph="cb-morph-square-01" data-morph-hover="cb-morph-square-02" data-morph-duration="350" data-morph-repeat="0" data-morph-easing="easingCubicIn"

La clase cb-mask-morph la busca Javascript, el sentido de los parámetros es el siguiente:

data-morph-mask : se indica el id ( sin la almohadilla ) de la capa ClipPath que se quiere usar como máscara.

data-morph : es el id ( sin almohadilla ) de la capa Path, dentro del ClipPath, este será el efecto de máscara inicial.

data-morph-hover : se pasa valor id del Path, en que se quiere que convierta la máscara al hacer hover.

data-morph-duration : es un número en milisegundos, el tiempo que tarda la máscara en transformarse de la forma 1 a la 2.

data-morph-repeat : es el número de veces (extra) que se repite la transformación, lo dejamos en cero para que solo se haga 1 vez al hacer hover.

data-morph-easing : es un literal del tipo de transición de la animación, son palabras reservadas de la libreria Kute.js, leer aquí