Hamburger + Clip-Path

11.04.2021

Using clip-path to create a hamburger menu open effect.

Made with: HTML,CSS

View Code

Hamburger + Clip-Path

Squeaky Portraits With Clip-Path: Path()

12.02.2021

Made with: HTML (Pug),CSS (Stylus),JS (Babel)

View Code

Squeaky Portraits With Clip-Path: Path()

Clip-Path Checkbox Animation

10.01.2021

Made with: HTML,CSS (SCSS),JS

View Code

Clip-Path Checkbox Animation

Css Clip-Path Editor

17.11.2020

Made with: HTML,CSS,JS

View Code

Css Clip-Path Editor

Animated Clip-Path Slider Concept

9.09.2020

Made with: HTML,CSS (SCSS),JS (Babel)

View Code

Animated Clip-Path Slider Concept

Css Shapes Layout Experiment

25.08.2020

Made with: HTML,CSS

View Code

Css Shapes Layout Experiment

Mouse Hover Reveal

6.07.2020

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

View Code

Mouse Hover Reveal

Split Text With Clip-Path

11.05.2020

Made with: HTML,CSS (SCSS)

View Code

Split Text With Clip-Path

Fetch The Bolt Cutters With Clip-Path

29.04.2020

Made with: HTML,CSS (SCSS)

View Code

Fetch The Bolt Cutters With Clip-Path

Pure Css Image Hover With Clip-Path

25.04.2020

Made with: HTML,CSS (SCSS)

View Code

Pure Css Image Hover With Clip-Path

Css Clip-Path Hover Effect

24.04.2020

Made with: HTML (Pug),CSS

View Code

Css Clip-Path Hover Effect

Hover With Clip-Path Effect

11.04.2020

Just experimenting with the clip-path property.

Made with: HTML,CSS (SCSS)

View Code

Hover With Clip-Path Effect

Clip-Pathed Image Plus Shape-Outside

3.03.2020

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)

View Code

Clip-Pathed Image Plus Shape-Outside

Clip Path Hover Animation

13.02.2020

A clip-path hover animation that is fully keyboard accessible.

Made with: HTML,CSS (SCSS)

View Code

Clip Path Hover Animation

Pure Css Loader #31

30.01.2020

One element swappy.

Made with: HTML,CSS (SCSS)

View Code

Pure Css Loader #31

Rhomb Gallery On Grids + Clip-Path

20.11.2019

Made with: HTML,CSS (SCSS)

View Code

Rhomb Gallery On Grids + Clip-Path

Brand Cut Zoom

8.05.2019

Using clip-path to create a playful entry of images.

Made with: HTML,CSS,JS

View Code

Brand Cut Zoom

Catpacks: Combining Clip Path & Shape Outside

12.11.2018

Use clip-path and shape-outside for wrapping your text round an image.

Made with: HTML,CSS (SCSS)

View Code

Catpacks: Combining Clip Path & Shape Outside

Clip-Path: Path()

21.09.2018

Made with: HTML,CSS

View Code

Clip-Path: Path()

Clip-Path Generator With React + Css Variables

8.05.2018

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)

View Code

Clip-Path Generator With React + Css Variables