When creating logos often the end product will be a static identity. After seeing some great usage of logos with moving parts I thought I’d play with the idea of making ours dynamic.
Animating part of a logo is taking this dynamic logo idea pretty literally but it could be used to convey information (or just look cool). I wanted something that moves the abstract rose more towards an ‘O’ and back again.
I’ve seen this done with animated SVGs before but I thought doing this with CSS would be interesting. It should be noted any example CSS in this post is without browser prefixes. (I recommend using autoprefixer for this.)
Planting the Seeds
First we need the basic markup. I chose a unordered list of petals:
li petal can be selected with CSS using
A Single Petal
The petal itself is a square element with a border and border radius to create a perfect circle. I’ve animated some of the styles to make it more obvious.
One section of the abstract rose.
Arranging the Rose
Each petal is moved into position using
transform: translate(x, y);. They say how far they are moving on the x and y axis respectively. The petals must be positioned absolutely so they overlap.
The first petal is translated to the right ⅓ (33.33%) of a petal, the second is translated down ⅙ (16.66%) of a petal and the final petal is both translated to the right and down by a ⅓ of a petal.
Now there’s three, wow.
Animating the Petals
Now we have the initial placement we can animate them to create the spin effect, each petal is moving to the position of the petal anti-clockwise before it.
Using SASS for More Control
All this is coded by hand (magic numbers), which is not ideal. If we want to make this even more flexible and give us control of the size of the logo and it’s behaviour we could use SASS, a pre-processor for CSS.
This would look something like this:
I realise this implementation isn’t perfect, you can find the above code in a CodePen, feel free to fork and improve.