Разработка - Анимированный логотип | Все для вебмастера

Добавляем разметку HTML:

HTML:

<div class="site-logo">
  <figure id="logo">
    <svg width="100%" height="100%" viewBox="0 0 148 128">
      <defs>
        <mask id="circle-mask">
          <rect fill="white" width="100%" height="100%"></rect>
          <circle id="logo-mask" fill="black" cx="120" cy="96" r="28"></circle>
        </mask>
      </defs>
      <polygon id="logo-hexagon" fill="#00B4FF" points="64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96" mask="url(#circle-mask)"></polygon>
      <circle id="logo-circle" fill="#3F3C3C" cx="120" cy="96" r="20"></circle>
    </svg>
  </figure>
  <div class="site-title">
    <div id="logo-text" class="site-title-text">
      hexagon<span>circle</span>
    </div>
  </div>
</div>

Добавляем разметку CSS:

SCSS:

@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;
  }
}

Завершаем все jquery:

JavaScript:

const restart = document.querySelector(".button-restart");
const logoAnimation = anime.timeline({
  autoplay: true,
  delay: 200
});

logoAnimation.add({
  targets: '#logo',
  translateY: [-100, 0],
  opacity: [0, 1],
  elasticity: 600,
  duration: 1600
}).add({
  targets: '#logo-hexagon',
  rotate: [-90, 0],
  duration: 1200,
  elasticity: 600,
  offset: 100
}).add({
  targets: '#logo-circle',
  scale: [0, 1],
  duration: 1200,
  elasticity: 600,
  offset: 500
}).add({
  targets: '#logo-mask',
  scale: [0, 1],
  duration: 1000,
  elasticity: 600,
  offset: 550
}).add({
  targets: '#logo-text',
  translateX: ['-100%', 0],
  opacity: [0, 1],
  duration: 1000,
  easing: 'easeOutExpo',
  offset: 1000
})

Смотрим наш результат:

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

Ещё ресурсы от baltun