2014 — 2016

Dynamic Logos with CSS

Posted on by Zac

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. 'thumbsup' emoji

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. 'heavy_check_mark' emoji

Now there’s three, wow. 'tada' emoji

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! 'clap' emoji

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.

Zac