Skip to content
Orbit CSS radial UI composer

CSS mandalas built with Orbit

A mandala is a stress-test for any radial UI framework. Real mandalas are built from layered rotational symmetries, nested polygons, and interlocking geometric patterns — exactly the kind of thing that would normally pull you toward SVG or a graphics library. Orbit lets you compose them out of plain <div> elements, which means you can theme them with CSS variables, animate them with transform, and inspect them in DevTools like any other markup.

Below: two more elaborate mandala spokes worth their own page, plus two simpler patterns inline as quick references.

Spokes

Geometric square mandala A complex mandala built from rotated, nested squares with multiple symmetry layers. Best for meditation apps, sacred geometry illustrations.
Radial symmetry mandala An 8-fold rotational mandala with concentric satellite rings and triangular sides. Best for logo bases, decorative dividers, hero backgrounds.

Quick reference patterns

These two simpler patterns are useful as starting points if you want to build your own mandala from scratch.

Hexagonal flower pattern

A six-sided central polygon surrounded by six satellite circles — the simplest “flower of life”-style mandala you can build.

Overlapping circles ring

A ring of 22 large overlapping satellites that produces a moiré-like rosette pattern.