Arcify


Haskell, But Quickly

Heads Up!

I'm writing a book about building and deploying web applications with Haskell and Yesod. Want to know when it's released? Click here.

I borrowed the idea from a design that I came across on simpledesktops.com, 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.