<div class="wrapper">
  <div class="circle">
    <div class="r-wrapper">
      <div class="r-top">
        <div class="r-cutout">
        </div>
        <div class="r-cookie">
        </div>
      </div>
      <div class="r-leg">
      </div>
      <div class="r-swoosh">
        <div class="r-swoosh-cutout">
        </div>
      </div>
  </div>
</div>
/* Rezli.com logo */


/* SCSS boilerplate */

@import "modular-scale";
@import "neat";
@import "bourbon";
@import "color-schemer";
@import "compass";
@import "breakpoint";
@import "susy";

/* Fun Times */

$blue: #4ebdd7;
$white: #fff;

@mixin bluegray(){
  animation-name: colorchange;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.wrapper{
  animation-iteration-count: infinite;
  animation-duration: 4s;
  animation-name: roll;
  .circle {
    position: relative;
    height: 400px;
    width: 400px;
    margin: 0 auto;
    background: $blue;
    border-radius: 100%;
    @include bluegray();
    div {
      position: absolute;
    }
    .r-wrapper {
      margin: 100px 0 0 138px;
      .r-top {
        background: $white;
        height: 120px;
        width: 150px;
        border-radius: 0 200px 200px 0;
        z-index: 1;
        .r-cutout {
          background: $blue;
          height: 42px;
          width: 100px;
          margin: 42px 0;
          border-radius: 0 50px 50px 0;
          @include bluegray();
        }
        .r-cookie {
          background: $white;
          width: 48px;
          height: 44px;
          margin: 42px 0;
          left: -48px;
          border-radius: 50px 0 0 50px;
        }
      }
      .r-leg {
        background: $white;
        margin-top: 120px;
        width: 50px;
        height: 70px;
      }
      .r-swoosh {
        background: $white;
        width: 95px;
        height: 115px;
        border-radius: 0 0 0 95px;
        margin: 81px 0 0 58px;
        .r-swoosh-cutout {
          background: $blue;
          width: 50px;
          height: 70px;
          margin-left: 45px;
          border-radius: 0 0 0 50px;
          @include bluegray();
        }
      }
    }
  }
}
@keyframes colorchange{
  from{
    background: #4ebdd7;
  }
  to{
    background: gray;
  }
}

@keyframes roll { 
  75%{
    -webkit-transform: none;
    transform: none;
  }
  100% { 
    -webkit-transform: rotate(360deg); 
    transform: rotate(360deg);
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.