body {
  background: #303030;
  cursor: default;
}
figure {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  transform-origin: center center;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-family: 'Raleway', sans-serif;
  font-size: 80px;
  
  > div {
    float: left;
  }
  svg {
    fill: transparent;
    stroke: #ccc;
    float: left;
    margin: 10px;
    
    &.filters {
      position: absolute;
    }
  }
  .g {
    stroke: #f64ea0;
    
    .anim {
      transition: stroke-dashoffset .4s;
      stroke-dasharray: 60px;
      stroke-dashoffset: 0;
    }
    body:hover & .anim {
      stroke-dashoffset: -60px;
    }
  }
  .o {
    stroke: #f24141;
  }
  .x {
    stroke: #446ff2;
  }
  .a {
    stroke: #18d95b;
    
    .anim {
      stroke-dasharray: 80px;
      transform-origin: center center;
      transform: translate(0, 0) scale(1);
      -webkit-transform-origin: center center;
      -webkit-transform: translate(0, 0) scale(1);
      -moz-transform: translate(0, 0) scale(1);
      transition: -webkit-transform .4s, -moz-transform .4s, transform .4s;
    }
    body:hover & .anim {
      transform: translate(0, -20px) scale(.77);
      -webkit-transform: translate(0, -20px) scale(.77);
      -moz-transform: translate(10px, -20px) scale(.77);
    }
  }
}