CSSで花のフォルムを作成し背景（アニメーション）にする

2022.01.17

梅の花のようなフォルムをCSSで作成します。
使用するのは、background-imageプロパティのグラデーション関数です。
種類は線形グラデーションと放射状グラデーションと扇形グラデーションがありますが、ここで使用するのは放射状グラデーションです。

放射状グラデーションで円を花びらの5枚分と中心部分の1個分作成するだけですが、その中心点の座標を求めるのが一番の難関になります。
数学を駆使して求めることも可能だと思いますが、もっと楽で確実な方法（アナログ的な方法ではありますが）があります。

アニメーションはありませんが、パターンを作成できるジェネレーターを作成しました。Favorite Pattern CSS Generator

梅の花のようなフォルム

CODEPEN

「Run Pen」をクリックしてください。

See the Pen background-animation-flower1 by blue moon (@blue-moon) on CodePen.

HTML

<body>
  <div class="flower"></div>
</body>

CSS

:root {
  --flower: #ffe0f3;
  --bg: #d9ebff;
}

body {
  background: var(--bg);
}

.flower {
  width: 100%;
  height: 100vh;
  background-size: 100px 100px;
  background-repeat: repeat;
  background-image:
    radial-gradient(circle at 50% 27.598%, var(--flower) 18%, rgba(255, 255, 255, 0) 18%),
    radial-gradient(circle at 28.695% 43.106%, var(--flower) 18%, rgba(255, 255, 255, 0) 18%),
    radial-gradient(circle at 71.304% 43.106%, var(--flower) 18%, rgba(255, 255, 255, 0) 18%),
    radial-gradient(circle at 63.042% 68.122%, var(--flower) 18%, rgba(255, 255, 255, 0) 18%),
    radial-gradient(circle at 36.901% 68.122%, var(--flower) 18%, rgba(255, 255, 255, 0) 18%),
    /* 花の中心部分を埋める */
    radial-gradient(circle at 50% 50%, var(--flower) 12%, rgba(255, 255, 255, 0) 12%); 
  animation: flowerAnim 7.5s infinite linear;
}

@-webkit-keyframes flowerAnim {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100px 100px;
  }
}
参考

デフォルトでは、background-imageは先に記述されたものが優先されます。
blend-mode： 要素が重なった時の見え方を指定することができます。
background-blend-mode プロパティと mix-blend-mode プロパティで使用できます。

円の中心点の座標の求め方

イラストレーター等の描画ソフトを使用します。
（イラレを使用するならば最初からイメージ画像やSVGで埋め込むという方法もありますが、今回はCSSで描画しするのが目的のため…。）

画像やSVGに比べ、大きさや色の変更を直感的に変更できるのが、CSSで描画するメリットかなと思います（コストやパフォーマンスは考慮しておりません）。

①px単位のファイルを用意します。

②一辺が101px（ボーダーの幅1pxを含む）の正方形（これが後にbackground-sizeとなる）を、作成します。

③この正方形と中心を同じとする正五角形を作成します。大きさは正方形の半分より小さ目くらいですが、適宜調整します。

④正五角形の頂点を中心とする正円（花びら部分）を5個と、正方形と中心を同じとする小さな円（花の中心部分）を1個作成します。ここで、花全体のバランスが良くなるように正五角形の大きさを適宜調整します。

⑤出来上がった図形をグループ化し、このオブジェクトをSVG形式にします。
オブジェクトのみをSVG形式に書き出しできない場合は、最初に描画する正方形を左上に合わせて作成しておくとよいと思います（xとyの座標が0から始まるため）。

⑥SVGコードの中の<polygon>の中のpointsに正五角形の頂点の座標が記述されています。
これを円形グラデーションの開始点（％）として使用します。

もし、px単位のファイルでない、又は一辺が101pxの正方形でない場合は、座標を％に計算します。
正方形の一辺が150、X座標が40の場合は、40 / 150 * 100% という具合です。
ただ、これを手計算するのは面倒なので、sassに計算してもらい小数点は適当な桁数で切り捨てます。

CSSファイルにコンパイルされる前はこんな感じに。

.flower {
background-image: radial-gradient(circle at ((141.73 / 283.46) * 100%) ((141.73 / 283.46) * 100%), rgba(255, 157, 214, 0.6) 10%,rgba(255, 255, 255, 0) 10%),
/* 以下省略 */
}

花びらを透けさせてみる

CODEPEN

「Run Pen」をクリックしてください。

See the Pen background-animation-flower2 by blue moon (@blue-moon) on CodePen.

CSS

body {
  background: rgba(135, 201, 255, 0.4);
}

.flower {
  width: 100%;
  height: 100vh;
  background-size: 100px 100px;
  background-repeat: repeat;
  background-image: 
    radial-gradient(circle at 50% 50%, rgba(255, 157, 214, 0.6) 10%, rgba(255, 255, 255, 0) 10%),
    radial-gradient(circle at 50% 27.598%, rgba(250, 202, 243, 0.6) 20%, rgba(255, 255, 255, 0) 20%),
    radial-gradient(circle at 28.695% 43.106%, rgba(247, 203, 233, 0.6) 20%, rgba(255, 255, 255, 0) 20%),
    radial-gradient(circle at 71.304% 43.106%, rgba(240, 200, 223, 0.6) 20%, rgba(255, 255, 255, 0) 20%),
    radial-gradient(circle at 63.042% 68.122%, rgba(246, 200, 255, 0.6) 20%, rgba(255, 255, 255, 0) 20%),
    radial-gradient(circle at 36.901% 68.122%, rgba(255, 208, 235, 0.6) 20%, rgba(255, 255, 255, 0) 20%);
  animation: flowerAnim 10s infinite linear;
}

@-webkit-keyframes flowerAnim {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100px 100px;
  }
}

花びらの縁を濃くしてみる

CODEPEN

「Run Pen」をクリックしてください。

See the Pen background-animation-flower3 by blue moon (@blue-moon) on CodePen.

CSS

:root {
  --gradient: rgba(240, 202, 243, 0.6) 15.5%, rgba(250, 176, 255, 0.6) 18%,rgba(255, 255, 255, 0) 20%;
}

body {
  background: rgba(168, 216, 255, 0.4);
}

.flower {
  width: 100%;
  height: 100vh;
  background-size: 100px 100px;
  background-repeat: repeat;
  background-image: 
    radial-gradient(circle at 50% 50%, rgba(252, 210, 255, 0.7), 
      rgba(251, 193, 255, 0.7), rgba(250, 181, 255, 0.7), rgba(255, 255, 255, 0) 14%),       
    radial-gradient(circle at 50% 27.598%, var(--gradient)), 
    radial-gradient(circle at 28.695% 43.106%, var(--gradient)), 
    radial-gradient(circle at 71.304% 43.106%, var(--gradient)), 
    radial-gradient(circle at 63.042% 68.122%, var(--gradient)), 
    radial-gradient(circle at 36.901% 68.122%, var(--gradient));
  animation: flowerAnim 10s infinite linear;
}

@keyframes flowerAnim {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100px 100px;
  }
}
タイトルとURLをコピーしました