Polygon Morph
ポリゴンモーフ
Generation Prompt
【対象要素】 - ページ内のアクセントとして置く装飾図形に適用する 【演出内容】 - 塗りの図形が三角形→四角形→六角形と形を変え続け、また三角形に戻る 【品質要件】 - 形の切り替えは頂点が連続的に移動するモーフィングにする(パッと切り替えない) - 各形で一拍静止してから次の形へ移る - ループの継ぎ目が分からないよう、終了時の状態と開始時の状態を完全に一致させる - prefers-reduced-motion 時はアニメーションを止め、静止した完成状態で表示する
[Target] - A decorative filled shape accent [Motion] - The shape morphs triangle → square → hexagon and back, forever [Quality] - Morph by moving vertices continuously (no hard swaps) - Pause briefly on each shape before morphing on - Make the loop seamless: the end state must match the start state exactly - With prefers-reduced-motion, stop the animation and show a static finished state
Prompts and demo code are free to use in your own projects. See About.