ルパン三世のカシャカシャってなるタイトルコールのやつをsvgにしたかった

はじめに

https://qiita.com/Sirloin/items/3db49c97763042e95eb5
この記事を見ましてこれを一枚のSVGとかに収めて他のところにも貼り付けたいなーとかgifとかmp4みたいにテキストエディタで見ると汚いやつにしたくないなーとか画面いっぱいに広げて大迫力のルパン三世が見たいなーとか思うわけです。
と思ってsvgの仕様書見てたらアニメーションに関する記述はありました。以下のやつ

を文字ごとに作ってあげればけ行けるかなと思えど、うまく行かなかったので方針転換。
普通に要素をjavascriptで制御する形にしました。

できたやつがこれ【音量注意】
https://misogihagi.github.io/rupinthethirdtitlecall/

スライドバーをいじると拡大します。画面いっぱいのタイトルコールをご覧あれ。

やってる最中に思ったこと

音声の遅延はどこから発生してるのかなと思って

 playSound(KASYA){
  audioElem = new Audio();
  audioElem.src = filename;
  audioElem.play();
 }

これが一回一回インスタンスを生成して使いまわさない分の遅延かと思ったけれど、これはこれで問題があるようで、
文字と文字が切り替わる瞬間、音声は再生中（音声の長さは200ミリ秒よりながい？）のようで、再生中の音声に対してplay()をしても最初から再生されるのではなく無視されてしまう。
ので一回一回インスタンスを生成するよう戻しました。ちょっと変わってますが。

const kasya = new Audio,
      kasya.src=base64~~   
      kasya.play()

追伸

svgいいやつだからもっと流行って。早いし軽いし埋め込むときもbase64せずにそのまま使えてhttpリクエストを減らせるいいやつなんです。本当はjavascriptを使わずanimationだけで完結すれば。。リファレンス読み込みたい。