The CSS path() function enables us to create complex paths, polygons and other shapes using SVG path command syntax.

.element { clip-path: path("…"); }

The CSS polygon() function allows you to create any type of polygon to use in the shape-outside, clip-path, and offset-path properties.

.element { clip-path: polygon(50% 0%, 75% 6.7%, 93.3% 25%, 100% 50%, 93.3% 75%, 75% 93.3%, 50% 100%, 25% 93.3%, 6.7% 75%, 0% 50%, 6.7% 25%, 25% 6.7%); }

The CSS paint() function allows us to use PaintWorklets as background images in CSS. PaintWorklets are images created in JavaScript that are applied to an element in CSS with the paint() function.

.element { background-image: paint(polka-dots); }

The progress() functions tells us where a value is relative to a minimum and a maximum as a number between 0 and 1.

.element { opacity: progress(100vw, 400px, 1200px); }