Tutorial mostrando como utilizar o clip-path para aplicar um SVG como uma máscara de uma div com CSS. Nele eu exploro diferentes formas de se aplicar as mesmas e os possíveis problemas que podem surgir.
00:00 Projeto
00:30 Estrutura Inicial
00:45 Máscara border-radius
02:54 Estrutura clip-path
04:00 clip-path: circle()
04:40 polygon()
05:45 Figma SVG
08:43 clipPath SVG
10:15 clip-path: url(#mask)
12:10 Responsividade clip-path
14:00 clip-path relativo
15:20 clip-path converter
16:25 Problemas
17:23 Origamid
Arquivos
https://github.com/origamid/publico/tree/main/clip-path
Exemplo:
https://origamid.github.io/publico/clip-path/
Clippy
https://bennettfeely.com/clippy/
Relative clip-path
https://yoksel.github.io/relative-clip-path/
Figma
https://www.figma.com/
Cursos da Origamid
https://www.origamid.com/cursos/