Shapes
The geometry of curiosity. From squares and decagons to spiral circles and starbursts—how unexpected SVG primitives rescue interfaces from boring monotony when used with surgical restraint.
Expressive Geometry
Decagon & Starburst
Spiral Circles
Curiosity Containers
Avatar Frames
SVG Primitives
What Are Shapes?
Literally anything from a humble square to a 10-sided decagon, a hypnotic spiral circle, or an eight-point starburst. Shapes exist to rescue digital interfaces from sterile, cookie-cutter monotony.
10 Equiangular Vertices · 36° Facet Steps
The Decagon
A 10-sided regular polygon with balanced 36-degree exterior angles. Provides a crisp, high-tech faceted envelope that immediately elevates badges, tokens, and avatar frames.
Code Block
1<svg viewBox="0 0 100 100" fill="none" className="size-16 text-text-destructive">
2 <polygon
3 points="50,10 73.5,17.6 88,37.6 88,62.4 73.5,82.4 50,90 26.5,82.4 12,62.4 12,37.6 26.5,17.6"
4 stroke="currentColor" strokeWidth="3" strokeLinejoin="round" fill="currentColor" fillOpacity="0.1"
5 />
6</svg>How to Use Shapes in Real UI
Shapes aren’t meaningless desktop doodles. In Elementa, they act as containers and frames that wrap other elements—avatars, card headers, metric pips, and empty states—infusing warmth, curiosity, and high distinction.
Avatar & Identity Envelopes
Wrap profile photos or team member initials in decagons or squircle envelopes to distinguish roles and team leads instantly.
Card Headers & Milestones
Anchor achievement cards and subscription tiers with starbursts and polyhedral frames around trophy glyphs.
Empty States & Hero Focals
Use spiral circles to turn unconfigured lists into engaging curiosity portals rather than dull dead-ends.
Metric Pips & Telemetry Tags
Frame performance percentages and live KPI deltas with organic blooms to break up dense grid tables.
Live Shape Container Studio
Aayush Goyal
Platform Architect · @deriva
Decagon Avatar Container
User Profile & Identity Envelope
Replaces circular avatar cutouts with a faceted 10-sided polygon. The geometric facets frame the user avatar, elevating key team leads and system operators.
Code Block
1// Decagon Avatar Container
2<div className="relative flex items-center justify-center size-20">
3 <svg viewBox="0 0 100 100" className="absolute inset-0 size-full text-text-destructive">
4 <polygon
5 points="50,10 73.5,17.6 88,37.6 88,62.4 73.5,82.4 50,90 26.5,82.4 12,62.4 12,37.6 26.5,17.6"
6 stroke="currentColor" strokeWidth="3" fill="currentColor" fillOpacity="0.1"
7 />
8 </svg>
9 <div className="relative size-14 rounded-full overflow-hidden border-2 border-stroke-base-secondary">
10 <img src="/avatar-lead.jpg" alt="DevOps Lead" />
11 </div>
12</div>Use Shapes Sparingly
Expressive shapes are high-potency design spice. A single drop enriches the dish; dumping the bottle ruins it. Overusing complex geometry creates visual carnival noise; strategic restraint creates iconic branding.
The Overused Chaos Trap
When an engineer discovers shapes and applies starbursts, decagons, spirals, and flowers to every card, button, and tag on the same screen:
Zero Focal Gravity
The eye doesn’t know where to rest. The user becomes fatigued by constant visual shouting. The shapes lose all novelty and become distracting visual debris.
Every metric card uses a different polygonal shape
Buttons rendered as stars or jagged polygons
Icons compete with heavy background geometric fills
Strategic Elementa Restraint
In Elementa, 90% of layout surfaces remain clean, calm, and serene. A single magnetic shape is reserved exclusively for the hero milestone, team avatar, or key focal point:
Singular Focal Magnet
Because the surrounding interface is calm and disciplined, the faceted decagon or starburst immediately shines as a cherished reward, elevating the product from clinical to memorable.
Standard buttons remain clean squircle/rectangle primitives
Shapes strictly reserved for identity avatars or VIP badges
SVG vectors styled with currentColor for seamless theme parity
Rules for Shape Implementation
Invariants for designers and engineers importing SVG shapes from 'get-elementa-ui'.
| Rule | Title | Specification | Compliance |
|---|---|---|---|
| Rule 01 | Color Coupling | Always drive SVG shape strokes via stroke="currentColor" and low-opacity fills. Never hardcode hex codes into shape paths. | Theme Invariant |
| Rule 02 | One Focal Per Screen | Limit decorative geometric containers to a maximum of two per primary viewport. If two elements demand shapes, demote one to a standard badge. | Focal Hierarchy |
| Rule 03 | Zero Kinetic Overkill | Keep micro-animations subtle (rotations under 15° or gentle ambient drift). Never introduce frantic spinning shapes that cause vestibular disorientation. | Vestibular A11y |