Jezen Thomas

Jezen Thomas

CTO & Co-Founder at Supercede. Haskell programmer. Writing about business and software engineering. Working from anywhere.


I borrowed the idea from a design that I came across on, by this cool hacker guy Adam Bachman. It consists of a number of different coloured arcs of varying lengths. I decided to try and bring it to life with some animation.

Each arc is just a list-item in an unordered list. The part of the element you’re seeing is the border. I curved the borders with border-radius, and then just removed a few sides of the borders by making their colour transparent. The animation is just random degrees of rotation in keyframes, with an infinite transition time.

See the Pen Arcify by Jezen Thomas (@jezen) on CodePen.