Hamburger + Clip-Path
Using clip-path to create a hamburger menu open effect.
Made with: HTML,CSS
Mouse Hover Reveal
Mouse hover utilizing mask-image, clip-path, background-clip, text-fill-color, and JavaScript to adjust in real time with your mouse
Made with: HTML,CSS (SCSS),JS
Hover With Clip-Path Effect
Just experimenting with the clip-path property.
Made with: HTML,CSS (SCSS)
Clip-Pathed Image Plus Shape-Outside
This is sort of an extreme example but opens up some cool possibilities for flowing text around art-directed images.
Made with: HTML (Pug),CSS (Sass)
Clip Path Hover Animation
A clip-path hover animation that is fully keyboard accessible.
Made with: HTML,CSS (SCSS)
Brand Cut Zoom
Using clip-path to create a playful entry of images.
Made with: HTML,CSS,JS
Catpacks: Combining Clip Path & Shape Outside
Use clip-path and shape-outside for wrapping your text round an image.
Made with: HTML,CSS (SCSS)
Clip-Path Generator With React + Css Variables
A simple clip-path generator made with React. It uses CSS variables to update the node positions for the clip-path and supports the various clip-path styles.
Made with: HTML,CSS (Stylus),JS (Babel)