images/content-image/web-designers-tools/Clippy-CSS-clip-path-maker.jpg#joomlaImage://local-images/content-image/web-designers-tools/Clippy-CSS-clip-path-maker.jpg?width=1920&height=919

Clippy

The page https://bennettfeely.com/clippy/ is a tool for creating shapes using the CSS clip-path function.

The clip-path property allows you to create complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset) or to an SVG source. The page was created by Bennett Feely, who is a web developer and the creator of many other interesting projects related to CSS.

The CSS clip-path property allows you to clip part of an HTML element according to a specified shape or path. You can use this property to create interesting visual effects, such as animations, transitions, or masks. To use the clip-path property, you need to provide a value in one of the following formats:

- URL: refers to an external SVG file containing a <clipPath> element.
- basic-shape: specifies a simple geometric shape, such as a circle, ellipse, rectangle, or polygon.
- path: specifies a custom path using the path() function, which takes a string that conforms to the SVG syntax.
- none: removes any clipping from the element.

Example of using the clip-path property with a basic-shape value:

css

div {
width: 300px;
height: 200px;
background-image: url("cat.jpg");
clip-path: circle(50% at center);
}

This code will make the div element have a background with the image of cat.jpg, but only a part of that image will be visible in the shape of a circle with a radius of 50% of the element's width and a center in its middle.