Разработка Анимированный логотип

@import url('https://fonts.googleapis.com/css?family=Dosis:600,800');

$ff: 'Dosis', sans-serif;
$slate: #3F3C3C;
$blue: #00B4FF;

@function rem($px, $base: 16) {
  @return #{$px/$base}rem;
}

* { box-sizing: border-box }

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: $ff;
  color: $slate;
}

.site-logo {
  display: flex;
  align-items: center;
  transform: translateZ(0);
}

[id="logo"] {
  position: relative;
  flex: 0 0 rem(60);
  width: rem(60);
  z-index: 2;
 
  polygon { transform-origin: 50% }
  circle  { transform-origin: 80% 80% }
}

.site-title {
  position: relative;
  overflow: hidden;
  margin-left: rem(-24);
  z-index: 1;
  transform: translateZ(0);
}

.site-title-text {
  padding: rem(4) rem(6) rem(4) rem(28);
  color: $slate;
  font-size: rem(32);
  font-weight: 800;
 
  span {
    margin-left: rem(0.25);
    color: $blue;
  }
}

.button-restart {
  position: fixed;
  bottom: rem(24);
  padding: rem(6) rem(24) rem(8) rem(24);
  font-family: $ff;
  font-size: rem(14);
  font-weight: 600;
  letter-spacing: rem(0.5);
  outline: none;
  cursor: pointer;
  color: $blue;
  background-color: transparent;
  border: rem(2) solid $blue;
  border-radius: rem(2);
  transition:
    color 0.2s ease-out,
    transform 0.2s ease-out;
 
  &:after {
    content: '';
    position: absolute;
    top:  rem(-2);
    left: rem(-2);
    pointer-events: none;
    width: 100%;
    height: 100%;
    border: rem(2) solid $slate;
    transform: translate(rem(4), rem(4));
    opacity: 0;
    transition:
      opacity 0.2s ease-out,
      transform 0.2s ease-out;
  }
 
  &:hover {
    color: $slate;
    transform: translateY(rem(-2));
    
    &:after {
      opacity: 1;
      transform: translate(0, 0);
    }
  }
 
  &:active {
    transform: translateY(rem(-1));
    transition-duration: 0s;
  }
}