Animated Logo¶
The Depictio mark, the rose, is a polar-area chart: eight wedges around a common centre, one colour each, each with its own radius. Animating the radii turns the logo into a small chart that keeps refreshing. When all eight radii are equal, the wedges close into a disc.
loadingnever rests
livea chart refreshing
fanopens like a fan
logoat rest
The animations pause while the mark is scrolled out of view or the tab is hidden. With prefers-reduced-motion set, the mark stays on the static logo shape.
Where it is used¶
- Loading indicator: the Depictio app shows the
loadingmode while it is busy. - Header of this site: the logo in the top bar is the rose at rest. Hover it for a moment and it plays the
fan; move away and it settles back.
One source¶
The rose is drawn by a single generated script, depictio-rose.js, which registers the <depictio-rose> custom element. The Depictio app, this documentation site and the talk deck all load that same file, so the mark looks and moves the same everywhere. The wedges are built from geometry at runtime: there is no image to fetch.