'%20stroke='%23E0E0E0'%20stroke-width='2'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_2682_149131'%20x1='7'%20y1='4'%20x2='23.0784'%20y2='26.6541'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%233A3AEA'/%3e%3cstop%20offset='0.592633'%20stop-color='%23DF13F9'/%3e%3cstop%20offset='0.763157'%20stop-color='%23F0558E'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
- Avatars and profile images
- Media thumbnails and cover art
- Decorative accents, badges, empty-state art
- Loading indicators that cycle through several outlines
Shape · Learn · Guide
Silhouettes are geometry, not magnitude
The corner scale answers "how round". A MaterialShape answers "what outline". They are separate layers: a heart does not have a corner size, and no corner value will ever produce a nine-sided cookie. Reach for a silhouette when the shape itself is the expression.
- Anything holding text — clipped corners eat the first and last words
- Interactive targets, where the visible outline should match the hit area
- Scrolling surfaces and lists
- Nested containers, where concentric arcs still matter
35 presets
The library
14 geometricRegular polygons and rounded primitives13 radialPetal and burst forms built around a centre6 organicIrregular, hand-drawn silhouettes2 pixelStepped, grid-aligned outlines
geometric Circle
shape-circleBoundary
Material 3 Design Kit geometry, adapted for CSS
Each canonical Design Kit outline is stored as cubic SVG geometry. Etesie derives the CSS polygon and mask from that same outline without changing its frame or silhouette.
geometric Circle