figmaでpathを使ってテキストを作成し、CSSでアニメーションをさせていきます。
完成アニメーション
figmaでSVGテキストを作成する。
figmaとは、無料で使えるUIデザインツールです。オフィシャルサイト(https://www.figma.com/)
①テキストを選択して、②適当なテキストを入力します。
③フォントサイズは72ピクセルを指定しています。
※figmaでは③フォントファミリー、フォントサイズ、線の太さを指定します。
①入力したテキストを選択して右クリック、②Outline strokeを選択します。
テキストにOutline strokeを選択することで、SVGで保存した際にS、V、Gそれぞれ分けられたpathを作成することができます。
右クリック、Copy/Paste as ②Copy as SVGを選択して、SVG形式でコピーして、HTMLにペーストします。
<svg width="144" height="53" viewBox="0 0 144 53" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.2336 29.1836C12.4445 27.5195 8.22578 25.4805 5.57735 23.0664C2.95235 20.6289 1.63985 17.6289 1.63985 14.0664C1.63985 10.0352 3.24532 6.70703 6.45625 4.08203C9.69063 1.43359 13.8859 0.109375 19.0422 0.109375C22.5578 0.109375 25.6867 0.789062 28.4289 2.14844C31.1945 3.50781 33.3273 5.38281 34.8273 7.77344C36.3508 10.1641 37.1125 12.7773 37.1125 15.6133H30.3273C30.3273 12.5195 29.343 10.0938 27.3742 8.33594C25.4055 6.55469 22.6281 5.66406 19.0422 5.66406C15.7141 5.66406 13.1125 6.40234 11.2375 7.87891C9.38594 9.33203 8.46016 11.3594 8.46016 13.9609C8.46016 16.0469 9.33907 17.8164 11.0969 19.2695C12.8781 20.6992 15.8898 22.0117 20.132 23.207C24.3977 24.4023 27.7258 25.7266 30.1164 27.1797C32.5305 28.6094 34.3117 30.2852 35.4602 32.207C36.632 34.1289 37.218 36.3906 37.218 38.9922C37.218 43.1406 35.6008 46.4688 32.3664 48.9766C29.132 51.4609 24.8078 52.7031 19.3938 52.7031C15.8781 52.7031 12.5969 52.0352 9.55 50.6992C6.50313 49.3398 4.14766 47.4883 2.4836 45.1445C0.842972 42.8008 0.0226593 40.1406 0.0226593 37.1641H6.80782C6.80782 40.2578 7.94453 42.707 10.218 44.5117C12.5148 46.293 15.5734 47.1836 19.3938 47.1836C22.9563 47.1836 25.6867 46.457 27.5852 45.0039C29.4836 43.5508 30.4328 41.5703 30.4328 39.0625C30.4328 36.5547 29.5539 34.6211 27.7961 33.2617C26.0383 31.8789 22.8508 30.5195 18.2336 29.1836Z"/>
<path d="M70.0469 43.0352L84.6719 0.8125H92.0547L73.0703 52H67.0938L48.1445 0.8125H55.4922L70.0469 43.0352Z"/>
<path d="M143.446 45.2852C141.712 47.7695 139.286 49.6328 136.169 50.875C133.075 52.0938 129.466 52.7031 125.341 52.7031C121.169 52.7031 117.466 51.7305 114.231 49.7852C110.997 47.8164 108.489 45.0273 106.708 41.418C104.95 37.8086 104.048 33.625 104.001 28.8672V24.4023C104.001 16.6914 105.794 10.7148 109.38 6.47266C112.989 2.23047 118.052 0.109375 124.567 0.109375C129.911 0.109375 134.212 1.48047 137.47 4.22266C140.727 6.94141 142.72 10.8086 143.446 15.8242H136.696C135.43 9.05078 131.399 5.66406 124.602 5.66406C120.079 5.66406 116.645 7.25781 114.302 10.4453C111.981 13.6094 110.809 18.2031 110.786 24.2266V28.4102C110.786 34.1523 112.098 38.7227 114.723 42.1211C117.348 45.4961 120.899 47.1836 125.376 47.1836C127.907 47.1836 130.122 46.9023 132.02 46.3398C133.919 45.7773 135.489 44.8281 136.731 43.4922V31.9961H124.884V26.5117H143.446V45.2852Z"/>
</svg>上から順にS、V、Gのpathになっています。
svgタグにプロパティを追加して、テキストpathを調整します。
1: idを追加して後ほどcssプロパティを追加していきます、viewBoxを変更してテキストpathに余白を含めるようにしておきます。
2-4: pathに含まれている、fill属性を削除します。
x: -10 y: -10 width: 164 height: 73 の領域をwidth=”144″ height=”53″に表示させることで余白を作っています。余白を作ることで、テキストが見切れることを防いでいます。
<svg id="svg" width="144" height="53" viewBox="-10 -10 164 73" fill="none" xmlns="http://www.w3.org/2000/svg">CSSプロパティを追加する
#svg path {
fill: transparent;
stroke-width: 2px;
stroke-linejoin: round;
stroke-linecap: round;
}
#svg path:nth-child(1) {
stroke: rgb(222, 123, 123);
}
#svg path:nth-child(2) {
stroke: rgb(123, 133, 222);
}
#svg path:nth-child(3) {
stroke: rgb(123, 222, 131);
}2: 塗りつぶし色を透明に指定
3: 外枠の太さを2pxに指定
4: パスの曲がり形状を丸く指定
5: パスの終端の形状を丸く指定
9, 13, 17: 外枠の色を指定
すると、以下のように見た目を変更することができます。
外枠をアニメーションさせる方法
cssプロパティのstroke-dasharrayとstroke-dashoffsetプロパティを使って外枠を動かしていきます。
stroke-dasharray: 10; と指定すると、外枠の長さが、10ピクセル毎に表示、非表示が繰り返されます。
stroke-dasharray: 10 30;と複数値を指定すると、10ピクセル表示、30ピクセル非表示、10ピクセル表示と繰り返されます。
stroke-dashoffset: 50;と指定すると、始点から50ピクセル進んだところからstroke-dasharrayプロパティが適応されます。
外枠の長さを測定する
S、V、Gの外枠はそれぞれ長さが違います。stroke-dasharrayの値を大きくしていき、テキストの外枠の長さを測定します。
Sの場合、stroke-dasharray: 266;
Vの場合、stroke-dasharray: 219;
Gの場合、stroke-dasharray: 284;
このときそれぞれの外枠が初めてすべて表示されます、つまりこの値が外枠の長さになります。
stroke-dasharrayで、外枠を任意の部分で表示・非表示にさせ、stroke-dashoffsetで、外枠の長さだけ移動させることで、外枠をアニメーションさせることができます。
Sをアニメーションさせる
#svg path:nth-child(1) {
stroke: rgb(222, 123, 123);
stroke-dasharray: 133;
animation: s_animate 6s linear infinite;
}
@keyframes s_animate {
100% {
stroke-dashoffset: 266;
}
}3: 133ピクセル、全長がSの場合266ピクセルなので、半分の外枠が表示されます。
4, 9: animationプロパティで6秒間で外枠分の266ピクセル移動させます。
stroke-dasharrayの値を変更することで、表示される長さを変更します。
※Sの場合
| stroke-dasharray | 外枠 |
| 133 | 1/2 |
| 66.5 | 1/4 |
| 33.25 | 1/8 |
| 26.6 | 1/10 |
| 2.66 | 1/100 |
偶数かつ割り切れる値を使うことができます。
これまでのやり方では、stroke-dasharrayを66.5の場合、66.5ピクセル表示、66.5ピクセル非表示、66.5ピクセル表示、66.5ピクセル非表示の合計2本の外枠が表示されています。
一本だけ表示させたい場合
stroke-dasharray: 66.5 199.5; (266 – 66.5)と指定すると一本だけ表示させることができます。
66.5ピクセルを表示させた後、全長から66.5ピクセル分を引いた分だけ非表示にしています。
アニメーションを応用する
これまでの応用として、複数の色を使ってアニメーションを作っていきます。
pathを複数回使用する
<svg id="svg" width="144" height="53" viewBox="-10 -10 164 73" xmlns="http://www.w3.org/2000/svg">
<symbol>
<g id="s">
<path d="M18.2336 29.1836C12.4445 27.5195 8.22578 25.4805 5.57735 23.0664C2.95235 20.6289 1.63985 17.6289 1.63985 14.0664C1.63985 10.0352 3.24532 6.70703 6.45625 4.08203C9.69063 1.43359 13.8859 0.109375 19.0422 0.109375C22.5578 0.109375 25.6867 0.789062 28.4289 2.14844C31.1945 3.50781 33.3273 5.38281 34.8273 7.77344C36.3508 10.1641 37.1125 12.7773 37.1125 15.6133H30.3273C30.3273 12.5195 29.343 10.0938 27.3742 8.33594C25.4055 6.55469 22.6281 5.66406 19.0422 5.66406C15.7141 5.66406 13.1125 6.40234 11.2375 7.87891C9.38594 9.33203 8.46016 11.3594 8.46016 13.9609C8.46016 16.0469 9.33907 17.8164 11.0969 19.2695C12.8781 20.6992 15.8898 22.0117 20.132 23.207C24.3977 24.4023 27.7258 25.7266 30.1164 27.1797C32.5305 28.6094 34.3117 30.2852 35.4602 32.207C36.632 34.1289 37.218 36.3906 37.218 38.9922C37.218 43.1406 35.6008 46.4688 32.3664 48.9766C29.132 51.4609 24.8078 52.7031 19.3938 52.7031C15.8781 52.7031 12.5969 52.0352 9.55 50.6992C6.50313 49.3398 4.14766 47.4883 2.4836 45.1445C0.842972 42.8008 0.0226593 40.1406 0.0226593 37.1641H6.80782C6.80782 40.2578 7.94453 42.707 10.218 44.5117C12.5148 46.293 15.5734 47.1836 19.3938 47.1836C22.9563 47.1836 25.6867 46.457 27.5852 45.0039C29.4836 43.5508 30.4328 41.5703 30.4328 39.0625C30.4328 36.5547 29.5539 34.6211 27.7961 33.2617C26.0383 31.8789 22.8508 30.5195 18.2336 29.1836Z" />
</g>
<g id="v">
<path d="M70.0469 43.0352L84.6719 0.8125H92.0547L73.0703 52H67.0938L48.1445 0.8125H55.4922L70.0469 43.0352Z" />
</g>
<g id="g">
<path d="M143.446 45.2852C141.712 47.7695 139.286 49.6328 136.169 50.875C133.075 52.0938 129.466 52.7031 125.341 52.7031C121.169 52.7031 117.466 51.7305 114.231 49.7852C110.997 47.8164 108.489 45.0273 106.708 41.418C104.95 37.8086 104.048 33.625 104.001 28.8672V24.4023C104.001 16.6914 105.794 10.7148 109.38 6.47266C112.989 2.23047 118.052 0.109375 124.567 0.109375C129.911 0.109375 134.212 1.48047 137.47 4.22266C140.727 6.94141 142.72 10.8086 143.446 15.8242H136.696C135.43 9.05078 131.399 5.66406 124.602 5.66406C120.079 5.66406 116.645 7.25781 114.302 10.4453C111.981 13.6094 110.809 18.2031 110.786 24.2266V28.4102C110.786 34.1523 112.098 38.7227 114.723 42.1211C117.348 45.4961 120.899 47.1836 125.376 47.1836C127.907 47.1836 130.122 46.9023 132.02 46.3398C133.919 45.7773 135.489 44.8281 136.731 43.4922V31.9961H124.884V26.5117H143.446V45.2852Z" />
</g>
</symbol>
<use xlink:href="#s" class="s1"></use>
<use xlink:href="#s" class="s2"></use>
<use xlink:href="#v" class="v1"></use>
<use xlink:href="#v" class="v2"></use>
<use xlink:href="#g" class="g1"></use>
<use xlink:href="#g" class="g2"></use>
</svg>3: pathをsymbolタグで囲って、4: gタグでpathを囲ってグループ分けして 15: useタグでidを指定して使います。
#svg .s1 {
stroke: rgb(222, 123, 123);
stroke-dasharray: 33.25;
animation: s_animate 6s linear infinite;
}
#svg .s2 {
stroke: rgb(123, 133, 222);
stroke-dasharray: 33.25;
animation: s_animate 6s linear infinite;
animation-delay: .75s;
}
@keyframes s_animate {
100% {
stroke-dashoffset: 266;
}
}1, 7: useタグにクラスをつけて、それぞれにアニメーションを作成しています。
11: animation-delayプロパティでアニメーションをずらして表示させています。
V、Gにもそれぞれアニメーションを付けると、完成です。
以上SVGストロークアニメーションを作成する方法でした。
全体のコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG stroke</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<svg id="svg" width="144" height="53" viewBox="-10 -10 164 73" xmlns="http://www.w3.org/2000/svg">
<symbol>
<g id="s">
<path d="M18.2336 29.1836C12.4445 27.5195 8.22578 25.4805 5.57735 23.0664C2.95235 20.6289 1.63985 17.6289 1.63985 14.0664C1.63985 10.0352 3.24532 6.70703 6.45625 4.08203C9.69063 1.43359 13.8859 0.109375 19.0422 0.109375C22.5578 0.109375 25.6867 0.789062 28.4289 2.14844C31.1945 3.50781 33.3273 5.38281 34.8273 7.77344C36.3508 10.1641 37.1125 12.7773 37.1125 15.6133H30.3273C30.3273 12.5195 29.343 10.0938 27.3742 8.33594C25.4055 6.55469 22.6281 5.66406 19.0422 5.66406C15.7141 5.66406 13.1125 6.40234 11.2375 7.87891C9.38594 9.33203 8.46016 11.3594 8.46016 13.9609C8.46016 16.0469 9.33907 17.8164 11.0969 19.2695C12.8781 20.6992 15.8898 22.0117 20.132 23.207C24.3977 24.4023 27.7258 25.7266 30.1164 27.1797C32.5305 28.6094 34.3117 30.2852 35.4602 32.207C36.632 34.1289 37.218 36.3906 37.218 38.9922C37.218 43.1406 35.6008 46.4688 32.3664 48.9766C29.132 51.4609 24.8078 52.7031 19.3938 52.7031C15.8781 52.7031 12.5969 52.0352 9.55 50.6992C6.50313 49.3398 4.14766 47.4883 2.4836 45.1445C0.842972 42.8008 0.0226593 40.1406 0.0226593 37.1641H6.80782C6.80782 40.2578 7.94453 42.707 10.218 44.5117C12.5148 46.293 15.5734 47.1836 19.3938 47.1836C22.9563 47.1836 25.6867 46.457 27.5852 45.0039C29.4836 43.5508 30.4328 41.5703 30.4328 39.0625C30.4328 36.5547 29.5539 34.6211 27.7961 33.2617C26.0383 31.8789 22.8508 30.5195 18.2336 29.1836Z" />
</g>
<g id="v">
<path d="M70.0469 43.0352L84.6719 0.8125H92.0547L73.0703 52H67.0938L48.1445 0.8125H55.4922L70.0469 43.0352Z" />
</g>
<g id="g">
<path d="M143.446 45.2852C141.712 47.7695 139.286 49.6328 136.169 50.875C133.075 52.0938 129.466 52.7031 125.341 52.7031C121.169 52.7031 117.466 51.7305 114.231 49.7852C110.997 47.8164 108.489 45.0273 106.708 41.418C104.95 37.8086 104.048 33.625 104.001 28.8672V24.4023C104.001 16.6914 105.794 10.7148 109.38 6.47266C112.989 2.23047 118.052 0.109375 124.567 0.109375C129.911 0.109375 134.212 1.48047 137.47 4.22266C140.727 6.94141 142.72 10.8086 143.446 15.8242H136.696C135.43 9.05078 131.399 5.66406 124.602 5.66406C120.079 5.66406 116.645 7.25781 114.302 10.4453C111.981 13.6094 110.809 18.2031 110.786 24.2266V28.4102C110.786 34.1523 112.098 38.7227 114.723 42.1211C117.348 45.4961 120.899 47.1836 125.376 47.1836C127.907 47.1836 130.122 46.9023 132.02 46.3398C133.919 45.7773 135.489 44.8281 136.731 43.4922V31.9961H124.884V26.5117H143.446V45.2852Z" />
</g>
</symbol>
<use xlink:href="#s" class="s1"></use>
<use xlink:href="#s" class="s2"></use>
<use xlink:href="#v" class="v1"></use>
<use xlink:href="#v" class="v2"></use>
<use xlink:href="#g" class="g1"></use>
<use xlink:href="#g" class="g2"></use>
</svg>
</div>
</body>
</html>* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#svg path {
fill: transparent;
stroke-width: 2px;
stroke-linejoin: round;
stroke-linecap: round;
}
#svg .s1 {
stroke: rgb(222, 123, 123);
stroke-dasharray: 33.25;
animation: s_animate 6s linear infinite;
}
#svg .s2 {
stroke: rgb(123, 133, 222);
stroke-dasharray: 33.25;
animation: s_animate 6s linear infinite;
animation-delay: .75s;
}
#svg .v1 {
stroke: rgb(123, 133, 222);
stroke-dasharray: 27.375;
animation: v_animate 6s linear infinite;
}
#svg .v2 {
stroke: rgb(123, 222, 131);
stroke-dasharray: 27.375;
animation: v_animate 6s linear infinite;
animation-delay: .75s;
}
#svg .g1 {
stroke: rgb(123, 222, 131);
stroke-dasharray: 35.5;
animation: g_animate 6s linear infinite;
}
#svg .g2 {
stroke: rgb(222, 123, 123);
stroke-dasharray: 35.5;
animation: g_animate 6s linear infinite;
animation-delay: .75s;
}
@keyframes s_animate {
100% {
stroke-dashoffset: 266;
}
}
@keyframes v_animate {
100% {
stroke-dashoffset: 219;
}
}
@keyframes g_animate {
100% {
stroke-dashoffset: 284;
}
}
