Front Animation

front-animation.markdown

Front Animation

A Pen by Rohit Singh Rathaur on CodePen.

License.

index.html

<div class="container">
  <svg id="hexagon" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g>
      <g id="R" transform="translate(36, 33)" fill="#64FFDA" style="opacity: 0" font-family="Calibre-Medium, Calibre" font-size="50" font-weight="400" letter-spacing="4.16666603">
        <text>
          <tspan x="0.141666985" y="33">R</tspan>
        </text>
      </g>
    <path 
      stroke="#64FFDA" 
      stroke-width="5" 
      stroke-linecap="round" 
      stroke-linejoin="round" 
      d="M 50, 5
         L 11, 27
         L 11, 72
         L 50, 95
         L 89, 73
         L 89, 28 z"
          />
      </g>
  </svg>
</div>

script.js

const anim = anime.timeline({
  loop: true,
  direction: 'alternate',
});

anim
  .add({
    targets: '#hexagon path',
    strokeDashoffset: [anime.setDashoffset, 0],
    easing: 'easeInOutQuart',
    duration: 2000,
    delay: function(el, i) { return i * 250 },
  })
  .add({
    targets: '#hexagon #R',
    duration: 1000,
    opacity: 1,
    easing: 'easeInOutQuart'
  });

style.css

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  background-color: #0a192f;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: max-content;
  max-width: 100px;
}

svg {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0 auto;
  fill: none;
}