[{"data":1,"prerenderedAt":881},["ShallowReactive",2],{"article-css-animation-art":3},{"id":4,"title":5,"body":6,"date":873,"description":874,"extension":875,"meta":876,"navigation":147,"path":877,"seo":878,"stem":879,"__hash__":880},"articles\u002Farticles\u002Fcss-animation-art.md","CSS アニメーションと SVG で描くアート",{"type":7,"value":8,"toc":861},"minimark",[9,14,18,21,25,28,195,202,350,356,377,380,394,577,580,584,591,594,598,608,650,653,660,685,696,699,706,778,780,783,850,857],[10,11,13],"h2",{"id":12},"作品-1-solar-system","作品 1 — Solar System",[15,16,17],"p",{},"CSS アニメーションだけで動く太陽系です。惑星・軌道・星空・太陽の光量変化をすべて CSS で実現しています。",[19,20],"solar-system",{},[22,23,24],"h3",{"id":24},"軌道アニメーションの仕組み",[15,26,27],{},"各惑星は「軌道リング（div）が回転し、その端に惑星が貼りついている」という構造です。",[29,30,35],"pre",{"className":31,"code":32,"language":33,"meta":34,"style":34},"language-css shiki shiki-themes github-light github-dark","\u002F* 軌道リングが中心を原点に回転する *\u002F\n.orbit-ring {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  border-radius: 50%;\n  animation: spin linear infinite;\n}\n\n@keyframes spin {\n  to { transform: rotate(360deg); }\n}\n","css","",[36,37,38,47,58,74,91,105,119,136,142,149,161,190],"code",{"__ignoreMap":34},[39,40,43],"span",{"class":41,"line":42},"line",1,[39,44,46],{"class":45},"sJ8bj","\u002F* 軌道リングが中心を原点に回転する *\u002F\n",[39,48,50,54],{"class":41,"line":49},2,[39,51,53],{"class":52},"sScJk",".orbit-ring",[39,55,57],{"class":56},"sVt8B"," {\n",[39,59,61,65,68,71],{"class":41,"line":60},3,[39,62,64],{"class":63},"sj4cs","  position",[39,66,67],{"class":56},": ",[39,69,70],{"class":63},"absolute",[39,72,73],{"class":56},";\n",[39,75,77,80,82,85,89],{"class":41,"line":76},4,[39,78,79],{"class":63},"  top",[39,81,67],{"class":56},[39,83,84],{"class":63},"50",[39,86,88],{"class":87},"szBVR","%",[39,90,73],{"class":56},[39,92,94,97,99,101,103],{"class":41,"line":93},5,[39,95,96],{"class":63},"  left",[39,98,67],{"class":56},[39,100,84],{"class":63},[39,102,88],{"class":87},[39,104,73],{"class":56},[39,106,108,111,113,115,117],{"class":41,"line":107},6,[39,109,110],{"class":63},"  border-radius",[39,112,67],{"class":56},[39,114,84],{"class":63},[39,116,88],{"class":87},[39,118,73],{"class":56},[39,120,122,125,128,131,134],{"class":41,"line":121},7,[39,123,124],{"class":63},"  animation",[39,126,127],{"class":56},": spin ",[39,129,130],{"class":63},"linear",[39,132,133],{"class":63}," infinite",[39,135,73],{"class":56},[39,137,139],{"class":41,"line":138},8,[39,140,141],{"class":56},"}\n",[39,143,145],{"class":41,"line":144},9,[39,146,148],{"emptyLinePlaceholder":147},true,"\n",[39,150,152,155,159],{"class":41,"line":151},10,[39,153,154],{"class":87},"@keyframes",[39,156,158],{"class":157},"s4XuR"," spin",[39,160,57],{"class":56},[39,162,164,167,170,173,175,178,181,184,187],{"class":41,"line":163},11,[39,165,166],{"class":52},"  to",[39,168,169],{"class":56}," { ",[39,171,172],{"class":63},"transform",[39,174,67],{"class":56},[39,176,177],{"class":63},"rotate",[39,179,180],{"class":56},"(",[39,182,183],{"class":63},"360",[39,185,186],{"class":87},"deg",[39,188,189],{"class":56},"); }\n",[39,191,193],{"class":41,"line":192},12,[39,194,141],{"class":56},[15,196,197,198,201],{},"惑星は軌道リングの上端（",[36,199,200],{},"top: -半径px","）に配置するだけ。リングが回れば惑星が円軌道を描きます。",[29,203,207],{"className":204,"code":205,"language":206,"meta":34,"style":34},"language-ts shiki shiki-themes github-light github-dark","\u002F\u002F 4惑星のデータ定義\nconst planets = [\n  { orbit: 55,  period: 2.5,  size: 7,  color: '#9ca3af' }, \u002F\u002F 水星\n  { orbit: 88,  period: 6,    size: 11, color: '#d97706' }, \u002F\u002F 金星\n  { orbit: 124, period: 11,   size: 12, color: '#00DC82' }, \u002F\u002F 地球\n  { orbit: 162, period: 19,   size: 9,  color: '#ef4444' }, \u002F\u002F 火星\n]\n","ts",[36,208,209,214,228,261,290,318,345],{"__ignoreMap":34},[39,210,211],{"class":41,"line":42},[39,212,213],{"class":45},"\u002F\u002F 4惑星のデータ定義\n",[39,215,216,219,222,225],{"class":41,"line":49},[39,217,218],{"class":87},"const",[39,220,221],{"class":63}," planets",[39,223,224],{"class":87}," =",[39,226,227],{"class":56}," [\n",[39,229,230,233,236,239,242,245,248,251,255,258],{"class":41,"line":60},[39,231,232],{"class":56},"  { orbit: ",[39,234,235],{"class":63},"55",[39,237,238],{"class":56},",  period: ",[39,240,241],{"class":63},"2.5",[39,243,244],{"class":56},",  size: ",[39,246,247],{"class":63},"7",[39,249,250],{"class":56},",  color: ",[39,252,254],{"class":253},"sZZnC","'#9ca3af'",[39,256,257],{"class":56}," }, ",[39,259,260],{"class":45},"\u002F\u002F 水星\n",[39,262,263,265,268,270,273,276,279,282,285,287],{"class":41,"line":76},[39,264,232],{"class":56},[39,266,267],{"class":63},"88",[39,269,238],{"class":56},[39,271,272],{"class":63},"6",[39,274,275],{"class":56},",    size: ",[39,277,278],{"class":63},"11",[39,280,281],{"class":56},", color: ",[39,283,284],{"class":253},"'#d97706'",[39,286,257],{"class":56},[39,288,289],{"class":45},"\u002F\u002F 金星\n",[39,291,292,294,297,300,302,305,308,310,313,315],{"class":41,"line":93},[39,293,232],{"class":56},[39,295,296],{"class":63},"124",[39,298,299],{"class":56},", period: ",[39,301,278],{"class":63},[39,303,304],{"class":56},",   size: ",[39,306,307],{"class":63},"12",[39,309,281],{"class":56},[39,311,312],{"class":253},"'#00DC82'",[39,314,257],{"class":56},[39,316,317],{"class":45},"\u002F\u002F 地球\n",[39,319,320,322,325,327,330,332,335,337,340,342],{"class":41,"line":107},[39,321,232],{"class":56},[39,323,324],{"class":63},"162",[39,326,299],{"class":56},[39,328,329],{"class":63},"19",[39,331,304],{"class":56},[39,333,334],{"class":63},"9",[39,336,250],{"class":56},[39,338,339],{"class":253},"'#ef4444'",[39,341,257],{"class":56},[39,343,344],{"class":45},"\u002F\u002F 火星\n",[39,346,347],{"class":41,"line":121},[39,348,349],{"class":56},"]\n",[15,351,352,355],{},[36,353,354],{},"animationDelay"," に負の値を設定することで、ビルド時点での惑星の開始位置をずらせます。",[29,357,359],{"className":204,"code":358,"language":206,"meta":34,"style":34},"animationDelay: p.delay + 's'  \u002F\u002F 例: -4.5s → 4.5秒分進んだ状態から開始\n",[36,360,361],{"__ignoreMap":34},[39,362,363,365,368,371,374],{"class":41,"line":42},[39,364,354],{"class":52},[39,366,367],{"class":56},": p.delay ",[39,369,370],{"class":87},"+",[39,372,373],{"class":253}," 's'",[39,375,376],{"class":45},"  \u002F\u002F 例: -4.5s → 4.5秒分進んだ状態から開始\n",[22,378,379],{"id":379},"太陽の脈動",[15,381,382,385,386,389,390,393],{},[36,383,384],{},"radial-gradient"," と ",[36,387,388],{},"filter: blur"," の組み合わせで自然な光彩を表現し、 ",[36,391,392],{},"animation"," で明滅させています。",[29,395,397],{"className":31,"code":396,"language":33,"meta":34,"style":34},".sun-halo {\n  background: radial-gradient(circle, rgba(255,180,0,0.35) 0%, transparent 70%);\n  animation: pulse 3s ease-in-out infinite;\n}\n\n@keyframes pulse {\n  0%, 100% { transform: scale(1);   opacity: 0.5; }\n  50%       { transform: scale(1.4); opacity: 1;   }\n}\n",[36,398,399,406,467,487,491,495,504,542,573],{"__ignoreMap":34},[39,400,401,404],{"class":41,"line":42},[39,402,403],{"class":52},".sun-halo",[39,405,57],{"class":56},[39,407,408,411,413,415,417,420,423,426,428,431,434,437,439,442,444,447,450,452,454,456,459,462,464],{"class":41,"line":49},[39,409,410],{"class":63},"  background",[39,412,67],{"class":56},[39,414,384],{"class":63},[39,416,180],{"class":56},[39,418,419],{"class":63},"circle",[39,421,422],{"class":56},", ",[39,424,425],{"class":63},"rgba",[39,427,180],{"class":56},[39,429,430],{"class":63},"255",[39,432,433],{"class":56},",",[39,435,436],{"class":63},"180",[39,438,433],{"class":56},[39,440,441],{"class":63},"0",[39,443,433],{"class":56},[39,445,446],{"class":63},"0.35",[39,448,449],{"class":56},") ",[39,451,441],{"class":63},[39,453,88],{"class":87},[39,455,422],{"class":56},[39,457,458],{"class":63},"transparent",[39,460,461],{"class":63}," 70",[39,463,88],{"class":87},[39,465,466],{"class":56},");\n",[39,468,469,471,474,477,480,483,485],{"class":41,"line":60},[39,470,124],{"class":63},[39,472,473],{"class":56},": pulse ",[39,475,476],{"class":63},"3",[39,478,479],{"class":87},"s",[39,481,482],{"class":63}," ease-in-out",[39,484,133],{"class":63},[39,486,73],{"class":56},[39,488,489],{"class":41,"line":76},[39,490,141],{"class":56},[39,492,493],{"class":41,"line":93},[39,494,148],{"emptyLinePlaceholder":147},[39,496,497,499,502],{"class":41,"line":107},[39,498,154],{"class":87},[39,500,501],{"class":157}," pulse",[39,503,57],{"class":56},[39,505,506,509,511,514,516,518,520,523,525,528,531,534,536,539],{"class":41,"line":121},[39,507,508],{"class":52},"  0%",[39,510,422],{"class":56},[39,512,513],{"class":52},"100%",[39,515,169],{"class":56},[39,517,172],{"class":63},[39,519,67],{"class":56},[39,521,522],{"class":63},"scale",[39,524,180],{"class":56},[39,526,527],{"class":63},"1",[39,529,530],{"class":56},");   ",[39,532,533],{"class":63},"opacity",[39,535,67],{"class":56},[39,537,538],{"class":63},"0.5",[39,540,541],{"class":56},"; }\n",[39,543,544,547,550,552,554,556,558,561,564,566,568,570],{"class":41,"line":138},[39,545,546],{"class":52},"  50%",[39,548,549],{"class":56},"       { ",[39,551,172],{"class":63},[39,553,67],{"class":56},[39,555,522],{"class":63},[39,557,180],{"class":56},[39,559,560],{"class":63},"1.4",[39,562,563],{"class":56},"); ",[39,565,533],{"class":63},[39,567,67],{"class":56},[39,569,527],{"class":63},[39,571,572],{"class":56},";   }\n",[39,574,575],{"class":41,"line":144},[39,576,141],{"class":56},[578,579],"hr",{},[10,581,583],{"id":582},"作品-2-neon-city","作品 2 — Neon City",[15,585,586,587,590],{},"SVG で描いたネオン都市です。",[36,588,589],{},"\u003Cfilter>"," によるウィンドウの発光と、変換行列で作る水面リフレクションが特徴です。",[592,593],"neon-city",{},[22,595,597],{"id":596},"svg-フィルターでネオン発光","SVG フィルターでネオン発光",[15,599,600,603,604,607],{},[36,601,602],{},"\u003CfeGaussianBlur>"," でぼかし画像を生成し、元画像と合成（",[36,605,606],{},"feMerge","）することでグロー効果を作ります。",[29,609,613],{"className":610,"code":611,"language":612,"meta":34,"style":34},"language-svg shiki shiki-themes github-light github-dark","\u003Cfilter id=\"win-glow\">\n  \u003CfeGaussianBlur stdDeviation=\"2.5\" result=\"blur\" \u002F>\n  \u003CfeMerge>\n    \u003CfeMergeNode in=\"blur\" \u002F>       \u003C!-- ぼかした光 -->\n    \u003CfeMergeNode in=\"SourceGraphic\" \u002F> \u003C!-- 元のウィンドウ -->\n  \u003C\u002FfeMerge>\n\u003C\u002Ffilter>\n","svg",[36,614,615,620,625,630,635,640,645],{"__ignoreMap":34},[39,616,617],{"class":41,"line":42},[39,618,619],{},"\u003Cfilter id=\"win-glow\">\n",[39,621,622],{"class":41,"line":49},[39,623,624],{},"  \u003CfeGaussianBlur stdDeviation=\"2.5\" result=\"blur\" \u002F>\n",[39,626,627],{"class":41,"line":60},[39,628,629],{},"  \u003CfeMerge>\n",[39,631,632],{"class":41,"line":76},[39,633,634],{},"    \u003CfeMergeNode in=\"blur\" \u002F>       \u003C!-- ぼかした光 -->\n",[39,636,637],{"class":41,"line":93},[39,638,639],{},"    \u003CfeMergeNode in=\"SourceGraphic\" \u002F> \u003C!-- 元のウィンドウ -->\n",[39,641,642],{"class":41,"line":107},[39,643,644],{},"  \u003C\u002FfeMerge>\n",[39,646,647],{"class":41,"line":121},[39,648,649],{},"\u003C\u002Ffilter>\n",[22,651,652],{"id":652},"水面リフレクション",[15,654,655,656,659],{},"建物・窓を ",[36,657,658],{},"scale(1, -1)"," で上下反転し、地面ラインを軸に折り返すことで水面の映り込みを表現します。",[29,661,663],{"className":610,"code":662,"language":612,"meta":34,"style":34},"\u003C!-- translate(0, GROUND*2) で反転後の位置を地面ラインに揃える -->\n\u003Cg transform=\"translate(0, 600) scale(1, -1)\" mask=\"url(#reflect-fade)\">\n  \u003C!-- 同じ建物・窓を再描画 -->\n\u003C\u002Fg>\n",[36,664,665,670,675,680],{"__ignoreMap":34},[39,666,667],{"class":41,"line":42},[39,668,669],{},"\u003C!-- translate(0, GROUND*2) で反転後の位置を地面ラインに揃える -->\n",[39,671,672],{"class":41,"line":49},[39,673,674],{},"\u003Cg transform=\"translate(0, 600) scale(1, -1)\" mask=\"url(#reflect-fade)\">\n",[39,676,677],{"class":41,"line":60},[39,678,679],{},"  \u003C!-- 同じ建物・窓を再描画 -->\n",[39,681,682],{"class":41,"line":76},[39,683,684],{},"\u003C\u002Fg>\n",[15,686,687,688,691,692,695],{},"フェードマスクは ",[36,689,690],{},"linearGradient","（白→透明）を ",[36,693,694],{},"\u003Cmask>"," で適用して、水面が下に向かうほど薄くなるように制御しています。",[22,697,698],{"id":698},"ウィンドウの決定論的生成",[15,700,701,702,705],{},"JavaScript の乱数（",[36,703,704],{},"Math.random()","）は SSR とクライアントでズレてハイドレーションエラーになります。\nそのため、ビルドインデックスから計算する決定論的な式でウィンドウの点灯パターンを決めています。",[29,707,709],{"className":204,"code":708,"language":206,"meta":34,"style":34},"const seed = (buildingIndex * 31 + row * 17 + col * 7) % 100\nconst isLit = seed > 38  \u002F\u002F 約 62% が点灯\n",[36,710,711,757],{"__ignoreMap":34},[39,712,713,715,718,720,723,726,729,732,735,737,740,742,745,747,750,752,754],{"class":41,"line":42},[39,714,218],{"class":87},[39,716,717],{"class":63}," seed",[39,719,224],{"class":87},[39,721,722],{"class":56}," (buildingIndex ",[39,724,725],{"class":87},"*",[39,727,728],{"class":63}," 31",[39,730,731],{"class":87}," +",[39,733,734],{"class":56}," row ",[39,736,725],{"class":87},[39,738,739],{"class":63}," 17",[39,741,731],{"class":87},[39,743,744],{"class":56}," col ",[39,746,725],{"class":87},[39,748,749],{"class":63}," 7",[39,751,449],{"class":56},[39,753,88],{"class":87},[39,755,756],{"class":63}," 100\n",[39,758,759,761,764,766,769,772,775],{"class":41,"line":49},[39,760,218],{"class":87},[39,762,763],{"class":63}," isLit",[39,765,224],{"class":87},[39,767,768],{"class":56}," seed ",[39,770,771],{"class":87},">",[39,773,774],{"class":63}," 38",[39,776,777],{"class":45},"  \u002F\u002F 約 62% が点灯\n",[578,779],{},[10,781,782],{"id":782},"技術比較",[784,785,786,802],"table",{},[787,788,789],"thead",{},[790,791,792,796,799],"tr",{},[793,794,795],"th",{},"手法",[793,797,798],{},"向いている表現",[793,800,801],{},"難しい点",[803,804,805,817,828,839],"tbody",{},[790,806,807,811,814],{},[808,809,810],"td",{},"CSS animation",[808,812,813],{},"繰り返し動作・軌道・脈動",[808,815,816],{},"複雑な形状の制御",[790,818,819,822,825],{},[808,820,821],{},"SVG filter",[808,823,824],{},"発光・ぼかし・影",[808,826,827],{},"フィルター定義の記述量",[790,829,830,833,836],{},[808,831,832],{},"SVG transform",[808,834,835],{},"反転・スケール・鏡像",[808,837,838],{},"座標計算が必要",[790,840,841,844,847],{},[808,842,843],{},"CSS radial-gradient",[808,845,846],{},"光源・オーブ・背景",[808,848,849],{},"ブラウザ差異がある場合も",[851,852,854],"callout",{"type":853},"tip",[15,855,856],{},"CSS と SVG を組み合わせると、互いの弱点を補い合えます。アニメーションは CSS、複雑なフィルターは SVG というように使い分けましょう。",[858,859,860],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":34,"searchDepth":49,"depth":49,"links":862},[863,867,872],{"id":12,"depth":49,"text":13,"children":864},[865,866],{"id":24,"depth":60,"text":24},{"id":379,"depth":60,"text":379},{"id":582,"depth":49,"text":583,"children":868},[869,870,871],{"id":596,"depth":60,"text":597},{"id":652,"depth":60,"text":652},{"id":698,"depth":60,"text":698},{"id":782,"depth":49,"text":782},"2026-05-01T14:00:00+09:00","CSS @keyframes による太陽系アニメーションと、SVG フィルター・リフレクションを使ったネオン都市の制作過程を解説します。","md",{},"\u002Farticles\u002Fcss-animation-art",{"title":5,"description":874},"articles\u002Fcss-animation-art","VJnvJBALLbCuVIy-O_YmpCPaNPOQAP6cgz8X0pHEPGo",1777568742150]