今回扱う事例

JavaScript で SVG を動的に生成する話を書いていくのに、冒頭のモーションパスの例だと内容がシンプルにならなそうでした。
そのような中、最近書いた以下の記事は SVG の内容がシンプルなので、それを題材にしてみようと思います。

●p5.js で SVGフィルターを使う（p5.js Web Editor上の HTML・JavaScript に手を加えて利用） - Qiita
　https://qiita.com/youtoy/items/217bfe7e940f2a7e2626

JavaScript で SVG を動的に生成する時のポイント（「createElementNS()」を使う）

冒頭に書いた、モーションパスの事例をあれこれ試していた当時、最初は createElement() を使って SVG を生成ようとしたのですが、それがうまくいかないという状況がありました。

そして試行錯誤や調査をした結果、SVG を動的に生成する場合は「createElementNS()」を使う必要がある、というのが分かり、その後は大きなハマりポイントもなく進められました。
なお、調べて参照した情報源は、こんな感じです。

createElementNS() を使った SVG の動的な生成

p5.js Web Editor上で試す

タイトルにも書いたとおり、今回のお試しは「p5.js Web Editor上」で行います。

上で記載していた記事では、HTML の「</body>」の前に、以下のタグを直書きしていました。
この記事では、この SVG要素とその中身の部分を JavaScript で生成します。

    <svg>
      <filter id="feGaussianBlur">
        <feGaussianBlur stdDeviation="10 3" />
      </filter>
    </svg>

その SVG の動的生成の処理は、以下の内容を p5.js Web Editor の「sketch.js」の「setup()」の中に書きました。

  const parentnode = document.body;
  const svgElt = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  parentnode.appendChild(svgElt);
  
  svgFilter = document.createElementNS('http://www.w3.org/2000/svg', 'filter');
  svgFilter.id = "feGaussianBlur";
  svgElt.prepend(svgFilter);
  
  const feGaussianBlur = document.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur');
  feGaussianBlur.setAttribute("stdDeviation", "10 3");
  svgFilter.prepend(feGaussianBlur);

1つ目のまとまりの処理で SVG要素を生成しています。
そして 2つ目のまとまりが、その1つ下の「filter」の部分で、最後のまとまりが「feGaussianBlur」になる形です。

また、上記の処理の後には、canvas要素に SVGフィルターを適用する処理を忘れず入れておきます。
以下に、描画処理なども合わせた「sketch.js全体の内容」を掲載します。

sketch.js

let canvas;

function setup() {
  canvas = createCanvas(400, 300);
  fill(100, 100, 150);

  const parentnode = document.body;
  const svgElt = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  parentnode.appendChild(svgElt);
  
  svgFilter = document.createElementNS('http://www.w3.org/2000/svg', 'filter');
  svgFilter.id = "feGaussianBlur";
  svgElt.prepend(svgFilter);
  
  const feGaussianBlur = document.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur');
  feGaussianBlur.setAttribute("stdDeviation", "10 3");
  svgFilter.prepend(feGaussianBlur);
  
  canvas.style("filter", 'url(#feGaussianBlur)');
}

function draw() {
  background(220);
  circle((frameCount * 5) % width, frameCount % height, 50);
}

ちなみに、HTML は p5.js Web Editor　のデフォルトの内容から、「p5.sound.min.js」の読み込みを削っただけの内容です。CSS（style.css）は、デフォルトの内容に何も手を加えていない、そのままの内容です。

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />
  </head>
  <body>
    <main>
    </main>
    <script src="sketch.js"></script>
  </body>
</html>

そして、p5.js Web Editor でプログラムを実行し、ブラウザの開発者ツールを使って処理結果を確認してみます。
そうすると、以下の画像のように SVG が動的に生成されているのが確認できました。

そして、p5.js Web Editor のプレビューでも、以下のように Blur が適用されているのが確認できました。

ちなみに動いている時の様子は、前の記事に掲載していた以下と全く同じになります。