See the Pen Octagon by Katy DeCorah (@katydecorah) on CodePen
After creating the CSS Diamond I tried to replicate this Dribbble. I created a list item for each petal. They are all ovals with transparent border-left and border-right and then rotated respectively.
Nothing super complicated here. It’s just the magic of border-radius and some transparent/opaque colors.
I starting playing around with the animation and was pleased with my result. If you view on CodePen the animation is infinite.
Did you enjoy this post? Support Trans Lifeline. Trans Lifeline offers direct emotional and financial support to trans people in crisis.