애니메이션 - 텍스트 가 그려지는 효과

SVG Text Animation

SVG 를 이용한 애니메이션을 만들어 보았습니다.

---

html

viewBox 는 svg 요소의 크기를 확대 또는 축소 그리고 위치를 조정할 수 있는 속성 입니다.
viewBox 속성을 이용하면 화면에 크기에 따라 svg 요소의 크기가 자동으로 조절 됩니다.
(viewBox="min-x min-y width height")
<text> 요소는 텍스트로 구성된 그래픽 요소를 그립니다. (<text x=''; y='' dx='' dy='' rotate='' lengthAdjust='' textLength=''>)
text = x='50%' y='50%' , text-anchor='middle' 으로 텍스트 를 중간 정렬을 한것입니다.

코드 보기

<svg viewBox="0 0 1320 300">
  <text x="50%" y="50%" dy="40px" text-anchor="middle">SyuMay</text>
</svg>

css

stroke-dashoffset 은 stroke가 시작되는 위치를 변경하는데 사용됩니다.
숫자가 클수록 시작점으로부터 더 많이 띄워준 다음 시작을 합니다.
stroke-dasharray 은 SVG 모양의 획에 대시를 만드는 데 사용됩니다.
숫자가 클수록 획의 대시 사이에 넓은 공간을 만듭니다.
fill 은 텍스트 색상을 지정합니다.
stroke 은 테두리를 지정합니다.
stroke-width 테두리의 두께를 지정합니다.
따라서 지금 보시는 css는 stroke-dasharray로 각 텍스트 모양을 잡안준후
stroke-dashoffset 을 사용해 텍스트가 그려지는것처럼 효과를 주었습니다.

코드 보기

@font-face {
    font-family: 'SBAggro';
    font-weight: 300;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroLight.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroLight.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroLight.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroLight.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroLight.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'SBAggro';
    font-weight: 500;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroMedium.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroMedium.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroMedium.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroMedium.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroMedium.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'SBAggro';
    font-weight: 700;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroBold.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroBold.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroBold.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroBold.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroBold.ttf') format("truetype");
    font-display: swap;
}

body {
  background-color: #e3f2fd;
  overflow: hidden;
}
svg {
  font-family: 'SBAggro';
  font-size: 140px;
  position: absolute;
  font-weight: 700;
  width: 100%;
  height: 100%;
  text-transform: uppercase;
  fill: rgba(124, 71, 197, 1);
  animation: stroke 5s infinite alternate;
}
@keyframes stroke {
  0% {
    stroke-dashoffset: 25%;
    stroke-dasharray: 0 50%;
    fill: rgba(124, 71, 197, 0);
    stroke: rgba(81, 45, 131, 0);
    stroke-width: 2;
  }
  10% {
    fill: rgba(124, 71, 197, 0);
    stroke: rgba(81, 45, 131, 1);
  }
  70% {
    fill: rgba(124, 71, 197, 0);
    stroke: rgba(81, 45, 131, 1);
  }
  80% {
    fill: rgba(124, 71, 197, 0);
    stroke: rgba(81, 45, 131, 1);
  }
  95% {
    fill: rgba(124, 71, 197, 1);
    stroke: rgba(81, 45, 131, 0);
  }
  100% {
     stroke-dashoffset: -25%;
     stroke-dasharray: 50% 0; 
     fill: rgba(124, 71, 197, 1);
     stroke: rgba(81, 45, 131, 0);
     stroke-width: 2;
  }
}