SVGで和柄模様をアニメーション表示する
日本の伝統的な和柄模様を、SVGとアニメーションで表現した。
麻の葉模様と青海波。どちらも数学的な図形で定義できる。コードで生成して、動きをつけた。
作ったもの
SVGで麻の葉模様と青海波を生成するシステム。
上半分に麻の葉模様。緑の六角形が連続するパターン。下半分に青海波。同心円が波のように連なる。
アニメーションで模様が呼吸するように動く。色も時間とともに変化する。
なぜ作ったか
和柄の美しさをデジタルで表現したかった。
写真展示で和のテイストが欲しいと思った。でも、単なる画像では動きがない。アニメーションで動く和柄なら、目を引くと思った。
SVGなら数学的に定義できる。プログラムで生成すれば、サイズも自由。これだ。
麻の葉模様の生成
麻の葉模様は、六角形を基本とする幾何学模様。
SVGのpatternで繰り返しパターンを定義する：
<pattern id="asanoha" patternUnits="userSpaceOnUse" width="120" height="120">
<path d="M 60,0 L 40,35 L 0,40 L 30,60 L 20,100 L 60,80 L 100,100 L 90,60 L 120,40 L 80,35 Z"
fill="none" stroke="#566f42" stroke-width="2">
</path>
</pattern>
120×120ピクセルの範囲に1つの麻の葉を定義。これを繰り返せば、全体に模様が広がる。
最初はwidth="60" height="60"と小さく作った。でも、粗すぎた。120×120にしたら、細かい模様が綺麗に見えた。
青海波の実装
青海波は、同心円の連続パターン。
<pattern id="seigaiha" patternUnits="userSpaceOnUse" width="100" height="100">
<circle cx="0" cy="0" r="40" fill="none" stroke="#3a6a80" stroke-width="2">
<animate attributeName="r" values="20;40;20" dur="4s" repeatCount="indefinite"/>
</circle>
<circle cx="0" cy="0" r="30" fill="none" stroke="#3a6a80" stroke-width="2">
<animate attributeName="r" values="15;30;15" dur="4s" repeatCount="indefinite"/>
</circle>
<circle cx="0" cy="0" r="20" fill="none" stroke="#3a6a80" stroke-width="1.5">
<animate attributeName="r" values="10;20;10" dur="4s" repeatCount="indefinite"/>
</circle>
</pattern>
同心円を3つ重ねる。それぞれが異なる速度で大きくなったり小さくなったりする。
波の動きを表現するため、半径を変化させた。values="20;40;20"で、20から40に拡大して、また20に戻る。
アニメーションの調整
最初は全部の円が同じタイミングで動いていた。単調だった。
アニメーションの周期をずらすことにした：
- 外側の円：4秒周期
- 中間の円：5秒周期
- 内側の円：6秒周期
これで、複雑な動きになった。波が干渉し合うような感じ。意外でした。単純な円の組み合わせでも、周期をずらすだけで面白くなる。
色の変化
麻の葉模様の色を、時間とともに変化させた。
<animate attributeName="stroke"
values="#566f42;#7a9b49;#3d5214;#566f42"
dur="8s"
repeatCount="indefinite"/>
緑の濃淡を4段階で変化。8秒で1周する。
青海波は青系のグラデーション。linearGradientで定義して、グラデーション自体もアニメーションさせた。
色が動くことで、静的なパターンが生き生きと見える。
桜吹雪エフェクト
和の雰囲気を強化するため、桜の花びらを追加した。
<path id="petal" d="M0,0 C-1,-1 -2,1 0,2 C2,1 1,-1 0,0" fill="#ffd7e5" />
<use href="#petal" transform="translate(50, 30) scale(3)">
<animateTransform attributeName="transform" type="translate"
from="50,30" to="200,250"
dur="15s" repeatCount="indefinite" />
<animateTransform attributeName="transform" type="rotate"
from="0" to="360"
dur="7s" repeatCount="indefinite"
additive="sum" />
</use>
花びらが上から下に落ちる。同時に回転する。additive="sum"で、移動と回転を同時に適用。
花びらの数は8個。最初は20個くらい入れたけど、多すぎてうるさかった。8個でちょうど良いバランスになった。
試してみた表現
麻の葉模様と青海波を並べて表示。和の雰囲気が出た。
色を変えてみた。緑と青の組み合わせが一番しっくりきた。赤や紫も試したが、派手すぎて和の感じが薄れた。
アニメーション速度も調整した。速すぎると目がチカチカする。遅すぎると動いているか分からない。4-8秒の周期がちょうど良かった。
システム全体の流れ
使ってみて
SVGで和柄模様をアニメーション表示するシステムとして、完成した。
ポイントは以下の3つ：
- SVGのpatternで繰り返しパターンを定義（120×120pxの麻の葉、100×100pxの青海波）
- アニメーションの周期をずらして複雑な動きを表現（4秒、5秒、6秒）
- 色の変化で静的なパターンに生命感を与える
SVGなら解像度に依存しない。どんなサイズでも綺麗に表示できる。写真展示の背景や装飾として使える。
和柄の美しさをデジタルで表現したい方の参考になれば嬉しいです。
まとめ
今回は、SVGで和柄模様（麻の葉模様と青海波）をアニメーション表示するシステムを作りました。
ポイントは以下の3つ：
- SVGのpatternで数学的に模様を定義
- SMIL animationで色と形を時間変化
- 桜吹雪エフェクトで和の雰囲気を強化
コードで生成した模様でも、適切なアニメーションと色の選択で、和の美しさを表現できた。単純な幾何学図形の組み合わせで、伝統的な模様を再現できた点が良かった。
さらに深く学ぶには
この記事で興味を持った方におすすめのリンク：
自分の関連記事：
最後まで読んでくださり、ありがとうございました。