TIL a sweet SVG clip-path generator

POSTED ON: Aug 13, 2022

I'll be honest. Clip-paths confuse me. Honestly, I get so puzzled about how to approach them I just end up opening up Photoshop and fixing the image to fit.

The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

MDN doc

I always hate devs who go "Clip-paths is easy bruh. They're just coordinates on a 2d plane and..."

Is that readable to you?

Well, you're in luck! There's a GUI that does this for you!

Check it out here: https://bennettfeely.com/clippy/

Clip away, bruh!

via clip-path : An Awesome CSS Property You Should Be Using

and Useful CSS tools and resources to boost your productivity

Related TILs

Tagged: svg

TIL executing a xss using a SVG image

This user was able to upload a '.svg', that then executed a xss attack to steal local storage data.

Mar 21, 2023

TIL Icon Fonts being the suckfest that they are

In 99% of all use-cases, SVGs are better.

Sep 28, 2022

TIL a sweet SVG clip-path generator

The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

Aug 13, 2022