このコードペンはステン・フーガードの作品からインスピレーションを得ています

準備

アニメーションの異なる実装用に 2 つのコンテナを作成しましょう:

 
Animated text
  
 



 
Click on me!
  
 

Adobe Illustrator を使用して SVG を作成しました。その主な機能は、高さが小さく、幅が大きいことです。
svg をヘッダー要素を基準にして配置するため、svg はヘッダー要素の子であることに言及することが重要です。

CSS

コンテナをフレックスボックスに変換して、すべてを中央に適切に配置します。

.container {
 display: flex;
 place-content: center;
}

h1 {
 display: inline;
 position: relative;
}   

inline は、svg がそれに依存するため、単純に要素の幅をコンテンツまで縮小するために使用されます

次に、ヘッダーを基準にして svg を配置する必要があります:

svg {
 min-width: 110%;
 min-height: 100%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
}

標準的な方法を使用して、相対要素を親の中央に配置します。 SVG をテキストに合わせて調整するには、min-width と min-height を適用する必要があります。

JavaScriptによるアニメーションロジック

JavaScript で要素をアニメーション化するには、素晴らしい animate(keyframes, options) メソッドを使用できます。

キーフレーム

反復処理するプロパティを与える getDrawingParameters 関数を詳しく見てみましょう:

const getDrawingParameters = (path) => {
 const length = path.getTotalLength();
 path.style.strokeDasharray = length;
 const drawingProperties = [
  { strokeDashoffset: length, easing: "ease-in" },
  { strokeDashoffset: 0, offset: 0.15 }
 ];
 return drawingProperties;
};

まず、svg メソッド getTotalLength:
を使用して、実際のパスの長さを知る必要があります。

const length = path.getTotalLength();

次に、計算された長さを使用して描画をシミュレートする必要があります。出発点を定義しましょう。属性 ストロークDasharray:
が必要です。

path.style.strokeDasharray = length;

ここでは、1 つのダッシュ (size=length) と 1 つのギャップ (size=length) を交互に使用してパスを描画するようにこの属性に指示します。

長さが必要な次の属性は、ストローク-ダッシュオフセット:
です。

path.style.strokeDashoffset = length;

この値は、ダッシュ配列の計算が長さの値によって行われることを示します。そして、ダッシュ配列を「ダッシュ長ギャップ長ダッシュ長ギャップ長 ...」に設定しているため、開始パスは空になります (ギャップ)。

したがって、配列で反復可能なプロパティを定義します:

 const drawingProperties = [
  { strokeDashoffset: length, easing: "ease-in" },
  { strokeDashoffset: 0, offset: 0.15 }
 ];

オフセットを使用して、このプロパティに到達する必要がある相対時間を定義します。各反復での遅延を模倣するように作成されました。

オプション

animate メソッドの 2 番目の引数は options:

animatedPath.animate(
 getDrawingParameters(animatedPath), 
 {duration: 10000, iterations: Infinity}
);

アニメーションを無限の反復と 10 秒の継続時間に設定します。オフセットを覚えていますか? 「アクティブな」アニメーションにはわずか 1.5 秒かかります。