雪が降ります❄️ 📖

ホワイトクリスマスになるように雪を降らせます！（積もりませんが；）　サンドボックスだとつまらないので編集画面で実行してみて☆　画面いっぱいに降らせるためにbodyへ直接ぶっこむとゆう暴挙！　ネタなのでゆるして🙏　ので、クリアを押しても消えません。見飽きたらお帰りください。アドベントカレンダー24日目が埋まらないのでなんとかしなきゃと使い回しのコードで作ってみたけど、ありがたいことに埋まったので、文章は書かなくて良くなったヤツ。

プログラム: (→大)
!『https://n3s.nadesi.com/plain/SVGplus.nako3』を取り込む。 母艦＝DOM親要素。 変数 画面幅＝クライアント幅。 変数 画面高＝クライアント高さ。 # CSS 「body」へDOM親要素設定。 CSS＝「style」のDOM部品作成。 CSSに「#雪 {波カッコ} position:fixed; pointer-events:none; z-index:99; {波カッコ閉じ}」をHTML設定。 # SVG 親SVG＝[画面幅,画面高]のSVG親要素作成。 親SVGへSVG描画開始。 親SVGの「id」へ「雪」をDOM属性設定。 BODY＝親SVGのDOM親要素取得。 挿入先＝BODYのDOM初子要素取得。 BODYの挿入先へ親SVGをDOM子要素挿入。 ID=挿入先の「id」をDOM属性取得。 もし、ID＝「雪」ならば、BODYから挿入先をDOM子要素削除。 # 雪 雪は空配列。雪径＝20。雪間隔＝雪径*2。雪数＝画面幅/雪間隔。 # フィルター 定義＝親SVGへSVG定義領域作成。 雪フィルター＝定義にSVGフィルター作成。 SVG対象フィルター＝雪フィルター。 銀色にSVG塗り色設定。0.6にSVG透明度設定。 [1,1]で2のSVGドロップシャドウ。 # シンボル 雪シンボル＝定義へSVGシンボルグループ作成。 雪シンボルへSVG描画開始。 アリスブルー色にSVG塗り色設定。0.8にSVG透明度設定。 [50,50]から8の雪角度取得。 それでSVG多角形描画。 アリスブルー色にSVG線色設定。3にSVG線太設定。 頂点＝[50,50]から20の雪角度取得。 3回: 頂点[回数-1]から頂点[回数+2]までSVG線描画。 分岐点＝[50,50]から12の雪角度取得。 分岐点を反復: 枝＝対象から8の雪角度取得。 A=(対象キー-1+6)%6。B=(対象キー+1+6)%6。C=対象。 枝[A]からCまでSVG線描画。 枝[B]からCまでSVG線描画。 ●(中点から半径の)雪角度取得 P＝空配列。 6回 角度＝(360/6)*(回数-1)。 x＝半径*COS(((角度-90)をラジアン変換))＋中点[0]。 y＝半径*SIN(((角度-90)をラジアン変換))＋中点[1]。 Pへ[x,y]を配列追加。 ここまで。 Pで戻る。 ここまで。 親SVGへSVG描画開始。 雪シンボルの「rotate」に「5s」と「0 50 50;360 50 50」でSVG変形アニメーション設定。 # 複製 雪は空配列。 雪数回: 雪[回数-1]＝雪シンボルをSVG参照複製。 雪[回数-1]に雪フィルターをSVGフィルター設定。 [0,雪間隔*2*-1]へ雪[回数-1]をSVG描画移動。 # アニメーション開始のタイミング 降雪開始は0から雪数の配列連番作成。 降雪開始を配列シャッフル。 # アニメーション設定 雪数回: 番号＝回数-1。 X＝番号*雪間隔。Y＝雪間隔*-1。 揺れ幅＝((雪間隔の乱数)+雪間隔)/2。 揺れ位置＝空。 32回。 XX＝SIN(((画面高/2)/16*回数)/(画面高/2)*PI*2)*揺れ幅。 揺れ位置は揺れ位置に「{X+XX},{Y};」を追加。 Y＝Y+((画面高+雪間隔)/2)/16。 ここまで。 落下速度＝(5の乱数)+5。 雪[番号]の「translate」に「{落下速度}s」と揺れ位置でSVG変形アニメーション設定。 それの「begin」に「{降雪開始[番号]/2}s」をSVG属性設定。 ●クライアント幅 　　「document.documentElement.clientWidth」をJS実行。 ここまで。 ●クライアント高さ 　　「document.documentElement.clientHeight」をJS実行。 ここまで。