@shape
A polygon() for clip-path, from a preset name or from polar equations in the angle t.
Syntax
- @shape(<preset> [<k>])
- @shape(<command>: <value>; ...)
- preset
- One of the names listed on the @shape property, with the optional lobe count
k.
| Command | Meaning |
|---|---|
points | number of vertices, 3 to 3600. Default 3. |
r | radius as an expression in t, the angle from 0 to 2π. Default 1. |
x, y | coordinates as expressions in t, instead of r |
rotate | rotation in degrees |
scale | scale factor, or two factors for x and y |
move | offset of the origin, in units of the -1 to 1 space |
frame | draw the shape as an outline of this thickness, in points |
turn | how many times around the circle the points go. Default 1. |
dir | auto, reverse or an angle |
fill | evenodd or nonzero for the polygon fill rule |
| name | any other name declares a variable for the expressions that follow |
Each expression sees the angle t (or θ) and the point index i, starting at 1.
The arithmetic is the same as in Expressions.
seq(a, b, …) cycles its arguments from point to point.
range(a, b) runs from a to b across the shape.
A - before a command name negates its value.
The shape is drawn in a square from -1 to 1 and mapped to percentages of the element.
Examples
@grid: 1 / 60vmin;
background: #000;
clip-path: @shape(
points: 6;
scale: .8;
);A polar rose:
@grid: 1 / 60vmin;
background: #000;
clip-path: @shape(
points: 300;
r: cos(4t);
scale: .9;
);A heart from parametric equations:
@grid: 1 / 60vmin;
background: #e6437d;
clip-path: @shape(
points: 200;
x: sin(t)^3;
y: (13cos(t) - 5cos(2t) - 2cos(3t) - cos(4t))/16;
scale: .9;
);An outline with frame, and a variable:
@grid: 3 / 60vmin _2px;
background: #000;
clip-path: @shape(
k: @pn(3, 4, 5, 6, 7, 8, 9, 10, 12);
points: 300;
r: cos(k t)^2 + .5;
frame: 12;
scale: .7;
);Presets with random rotation:
@grid: 4 / 60vmin _2px;
background: @p(#000, #e6437d, #ebbf4d);
clip-path: @shape(@p(star, heart, drop, clover 4));
rotate: @r(360deg);