처음에

자신의 사이트의 톱의 문자를 표시하는 애니메이션을 SVG와 CSS로 구현했으므로 써 갑니다.

샘플

애니메이션의 원리는 여기 을 참고로 했습니다.

어쨌든 시도하고 싶은 소스 코드

HTML

<svg>
    <text x="0" y="50%">Hello</text>
</svg>

CSS

text {
    /* 色はお好みで */
    stroke: black;
    /* 文字の中身は塗りつぶさない */
    fill: none;
    /* 文字が大きい方がアニメーションが綺麗なので50pxを指定 */
    font-size: 50px;
    /* 100%だと最後まで表示されないので多めに設定する */
    stroke-dasharray: 150% 150%;
    /* 線が細いほうがアニメーションが綺麗なので0.5pxを指定 */
    stroke-width: 0.5px;
    -webkit-animation: stroke-anim 5s linear;
    animation: stroke-anim 5s linear;
}
@-webkit-keyframes stroke-anim {
  0% {
    /* 100%だと最後まで表示されないので多めに設定する */
    stroke-dashoffset: 150%;
  }
  100% {
    stroke-dashoffset: 0%;
  }
}

@keyframes stroke-anim {
  0% {
    /* 100%だと最後まで表示されないので多めに設定する */
    stroke-dashoffset: 150%;
  }
  100% {
    stroke-dashoffset: 0%;
  }
}

해설

시도하면 아래와 같은 "Hello"라는 문자가 애니메이션으로 표시됩니다.



캐릭터의 윤곽이 애니메이션에 의해 표시되기 때문에 캐릭터의 채우기를 하고 싶은 경우는 한 궁리 필요합니다.

채우기 대응 소스 코드

HTML

<svg>
    <text x="0" y="50%">Hello</text>
</svg>

CSS

text {
    /* 色はお好みで */
    stroke: black;
    /* 色はお好みで */
    fill: black;
    /* 文字が大きい方がアニメーションが綺麗なので50pxを指定 */
    font-size: 50px;
    /* 100%だと最後まで表示されないので多めに設定する */
    stroke-dasharray: 150% 150%;
    /* 線が細いほうがアニメーションが綺麗なので0.5pxを指定 */
    stroke-width: 0.5px;
    -webkit-animation: stroke-anim 5s linear;
    animation: stroke-anim 5s linear;
}
@-webkit-keyframes stroke-anim {
  0% {
    /* 100%だと最後まで表示されないので多めに設定する */
    stroke-dashoffset: 150%;
    fill:transparent;
  }
  50% {
    fill:transparent;
  }
  100% {
    stroke-dashoffset: 0%;
    fill:black;
  }
}

@keyframes stroke-anim {
  0% {
    /* 100%だと最後まで表示されないので多めに設定する */
    stroke-dashoffset: 150%;
    fill:transparent;
  }
  50% {
    fill:transparent;
  }
  100% {
    stroke-dashoffset: 0%;
    fill:black;
  }
}

해설

시도하면 위 샘플과 같이 "Hello"의 윤곽이 애니메이션으로 표시된 후 채우기 애니메이션이 시작되고 아래와 같이 표시됩니다.

끝에

생각보다 간단하게 실장을 할 수 있었습니다만, 윤곽의 애니메이션이므로 필기풍이라고는 가지 않았습니다(｀･ω･´)