Help us understand the problem. What is going on with this article?

Dr.Capital風背景メーカーの裏側 SVG編

J-POPの味わいに隠された音楽理論を解き明かすDr.CapitalのYouTubeチャンネルが好きで、

https://www.youtube.com/watch?v=fxjiqY1sJ1Y

あのド派手な背景をZOOMで真似したくなり、動画メーカーを制作してみました(個人的なファンアートでご本人はまったく関係ありません)。

https://www.ideamans.com/dr.capital/

Dr_Capital風背景メーカー.png

このページ制作でいくつか新しい技術に挑戦したので、何回かに分けて紹介したいと思います。

ド派手な背景をSVGで表現するには

あの背景では、放射状のストライプがグルグル回っています。これを正多角形を分解した三角形の集合で表現します。

radial-stripe1.jpg

放射の中心は、ビューポート矩形の中心のやや下です。

せっかくなので放射(多角形)の中心点Oは任意の座標にできるようにします。

多角形の大きさ(外接円の半径)は、中心点Oから最も遠いビューポートの頂点との距離にすると、どの角度でも最低限の大きさで多角形がビューポートをすっぽり覆うことができます。

radial-stripe.jpg

多角形の頂点は三角関数で簡単に求められます。うろ覚えだけどやっててよかった三角関数!

SVG

三角形はpolygon要素で簡単に記述できます。ストライプになるように、style属性のfillプロパティを交互に指定します。

<svg width="1280" height="720">
  <polygon class="piece-of-cake" points="x0,y0 x1,y1 x2,y2" style="fill: color1" />
  <polygon class="piece-of-cake" points="x0,y0 x1',y1' x2',y2'" style="fill: color2" />
  ...
</svg>

実際はSVGが数値計算の反映、カラーの選択や各種設定に応じて模様がリアクティブに変わるよう、Vue.jsを用いています。

CSS

これにCSSで定速で回転するアニメーションを付与します。

transform-originで、回転の中心を指定することに注意が必要です。

.piece-of-cake {
  animation: clockwise 180s linear infinite;
  transform-origin: 50% 80%;
}
@keyframes clockwise {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

以上、SVGであのグルグル背景を表現する方法でした。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした