![見出し画像](https://assets.st-note.com/production/uploads/images/138347084/rectangle_large_type_2_42fe9c395cfd5e1a786f78c0d74bb8ac.png?width=1200)
模様(もよう)をSVG(エスブイジー)にする
青海波という模様を SVG にしてみました。
![](https://assets.st-note.com/img/1713950911454-a72K5fHi6Y.png?width=1200)
このような繰り返しの模様を SVG で作るのは結構大変です。
一つの波だけならこんな感じです。
<svg id="Pattern" xmlns="http://www.w3.org/2000/svg" width="640" height="400">
<rect x="0" y="0" width="640" height="400" style="fill:#fff"></rect>
<path d="M0,0A30,30 0 0 1 60,0" style="stroke-width: 2.4;" stroke="#008080" fill="#ffffff"></path>
<path d="M6,0A24,24 0 0 1 54,0" stroke="#008080" fill="#ffffff" style="stroke-width: 2.4;"></path>
<path d="M12,0A18,18 0 0 1 48,0" stroke="#008080" fill="#ffffff" style="stroke-width: 2.4;"></path>
<path d="M18,0A12,12 0 0 1 42,0" stroke="#008080" fill="#ffffff" style="stroke-width: 2.4;"></path>
</svg>
これを少しずつ、ずらしながらたくさん描いていきます。
詳しくはブログ「JavaScript (71) 青海波」をお読みください。
この記事が気に入ったらサポートをしてみませんか?