Animated Logo - krystynek.com

animated-logo-krystynek-com.markdown

Animated Logo - krystynek.com

A Pen by Lubos Krystynek on CodePen.

License.

index.html

<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill-rule="freeze" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5">
  <path class="animatedLogo" d="M9.956 14.814l2.076 2.075 2.793-.022-4.384-4.385 4.37-4.37-2.744-.036-4.04 4.042V.597C8.65.468 9.3.4 9.965.4c5.28 0 9.568 4.287 9.568 9.567s-4.287 9.567-9.567 9.567S.4 15.247.4 9.967c0-3.88 2.313-7.222 5.635-8.723l.002 15.645 3.55-3.552" fill="none" stroke="#000" stroke-width=".8"/>
</svg>

style.scss

svg{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
}

.animatedLogo{
  stroke-dasharray: 117;
  stroke-dashoffset: -117;
  animation: draw-logo 2s;
  
  -o-transform-origin: 0% 50%;
  -ms-transform-origin: 50% 50%; /* IE 9 */
  -webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */ 
  transform-origin: 50% 50%;
  
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes draw-logo{
  from {
    stroke-dashoffset: -117;
    transform: rotate(0deg);

  }
  to{
    stroke-dashoffset: 0;
    transform: rotate(360deg);

  }
}