radial-gradientとrepeating-radial-gradient

線形グラデーションのlinear-gradientを繰り返すrepeating-linear-gradientがある（参考：linear-gradientとrepeating-linear-gradient）ように、放射状グラデーションのradial-gradientを繰り返すrepeating-radial-gradientプロパティも存在します。

repeating-linear-gradientと同じく、最後の色位置指定までを繰り返す形で埋め尽くします。

上サンプル{
 background: radial-gradient( at top left,coral , pink 20%);
}

下サンプル{
 background: repeating-radial-gradient( at top left,coral , pink 20%);
}

radial-gradientの場合、20％位置でグラデーションが終了し、残りは最後に指定した色での塗りつぶしになりますが、repeating-radial-gradinetの場合はグラデーションの繰り返しになります。

細かく指定すればradial-gradientでもかなり再現できます。

＃{ 
 background: radial-gradient( at top left,coral,pink 20%,coral 20%,pink 40%,coral 40%,pink 60%,coral 60%,pink 80%,coral 80%,pink 100%) ;
}

repeating-radial-gradientプロパティの指定については、radial-gradientと同じですので、詳しくは「radial-gradient」をご確認ください。

下のサンプルはレコード盤をrepeating-radial-gradientで表現しています。
アニメーションについては「cssアニメーションの基本」をご参照ください。

See the Pen repeating-radial-gradient by Takashi Abe (@TakeshiAbe) on CodePen.