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:
<ul class="petals">
<li></li>
<li></li>
<li></li>
</ul>
Each li
petal can be selected with CSS using nth-child
.
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.
.petals li{
height: 100px;
width: 100px;
border: 7px solid red;
border-radius: 50%;
}
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.
.petals li:nth-child(1){
transform: translate(33.33%, 0);
}
.petals li:nth-child(2){
transform: translate(0, 16.66%);
}
.petals li:nth-child(3){
transform: translate(33.33%, 33.33%);
}
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.
.petals li{
height: 100px;
width: 100px;
border: 7px solid red;
border-radius: 50%;
animation: .5s infinite alternate ease-in-out;
}
.petals li:nth-child(1){
transform: translate(33.33%, 0);
animation-name: petal-1;
}
.petals li:nth-child(2){
transform: translate(0, 16.66%);
animation-name: petal-2;
}
.petals li:nth-child(3){
transform: translate(33.33%, 33.33%);
animation-name: petal-3;
}
/* each petal has a respective animation */
@keyframes petal-1{
to{ transform: translate(0, 16.66%); }
}
@keyframes petal-2{
to{ transform: translate(33.33%, 33.33%); }
}
@keyframes petal-3{
to{ transform: translate(33.33%, 0); }
}
Animating wooo!
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:
$petalSize: 100px;
$petalThickness: ($petalSize * 0.07);
$petalColour: #C43200;
$spinSpeed: .5s;
.petals li{
position: absolute;
height: $petalSize;
width: $petalSize;
border: $petalThickness solid $petalColour;
border-radius: 50%;
animation: $spinSpeed; infinite alternate ease-in-out;
}
// collection of positions
$position:(
translate($petalSize / 3, 0),
translate(0, $petalSize / 6),
translate($petalSize / 3, $petalSize / 3)
);
// loop through petals
@for $i from 1 to length($position) + 1{
.petals li:nth-child(#{$i}){
transform: nth($position, $i);
animation-name: petal-#{$i};
}
// animate petal to previous position
$j: $i - 1;
@if $j == 0 { $j: 3; } // loop round array
// create animation for petal
@keyframes petal-#{$i}{ to{ transform: nth($position, $j) } }
}
I realise this implementation isn’t perfect, you can find the above code in a CodePen, feel free to fork and improve.