@shape
Clip the cell to a built-in shape. For shapes of your own, use the @shape() function.
Syntax
- @shape: <name> [<k>]
- @shape: star [<k> [<inner>]]
- name
-
circle,square,squircle,triangle,pentagon,hexagon,octagon,star,infinity,heart,fish,drop,bean,bicorn,vase,windmill,cloud,clover,hypocycloid,bud. - k
- A number for the shapes in the table below. Values outside the range are clamped.
- inner
- The inner radius of
star, as a fraction of the outer one. Default.382.
| Shape | k | Range | Default |
|---|---|---|---|
star | points | 3–10 | 5 |
clover | petals | 3–10 | 3 |
hypocycloid | cusps | 3–10 | 3 |
bud | lobes | 3–10 | 3 |
cloud | bumps | 1–10 | 3 |
squircle | exponent | .2–20 | 4 |
Examples
@grid: 5 / 60vmin _2px;
@shape: @p(circle, star, heart, hexagon);
background: #000;squircle from k = .25 to 4. At 1 it is a diamond, at 2 a circle:
@grid: 4 / 60vmin _2px;
@shape: squircle @calc(@i / 4);
background: #000;
Two shapes only morph into each other when they have the same number of points.
circle is an ellipse(), so give it 180 points with the
@shape() function to morph it into heart:
@grid: 1 / 60vmin;
background: #000;
animation: m 1.5s ease-in-out infinite alternate;
@keyframes m {
from { clip-path: @shape(circle; points: 180) }
to { clip-path: @shape(heart) }
}