DEMO
CODE
<div class="demo-stage sbr-stage"><svg class="sbr-svg" viewBox="0 0 200 200"><defs><linearGradient id="sbr-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#e91b89"/><stop offset="100%" stop-color="#7b37a8"/></linearGradient></defs><path fill="url(#sbr-g)" transform="translate(100,100)" d="M44,-58C58,-48,71,-37,75,-23C79,-9,74,8,66,22C58,36,47,47,34,55C20,63,3,68,-14,66C-31,64,-49,55,-60,41C-71,27,-75,8,-72,-10C-69,-28,-58,-44,-44,-55C-30,-66,-15,-72,1,-73C16,-74,32,-68,44,-58Z"/></svg></div>
.sbr-stage { display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:280px; }
.sbr-svg { width:200px; height:200px; animation:sbr 12s ease-in-out infinite; }
@keyframes sbr { 0% { transform:rotate(0deg) scale(1); } 50% { transform:rotate(180deg) scale(1.08); } 100% { transform:rotate(360deg) scale(1); } }
AI PROMPT
有機的なブロブ形がゆっくり回転・脈動するグラデーション図形をSVG+CSSで作って。viewBox中央に配置したblobの<path>に linearGradient を fill。<svg>要素自体に @keyframes で rotate(0→360deg) + 中間で scale(1.08) を 12s ease-in-out infinite。SVG全体を回すので transform-origin の悩みが無くシンプル。ヒーロー背景・アイキャッチの装飾に。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
学びを止めない · AMAZONサブスク
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
有機的なブロブ形がゆっくり回転・脈動するグラデーション図形。ヒーロー背景・アイキャッチの装飾に。CSSのみ。この効果はSVG要素をCSS（必要に応じてJavaScript）でアニメーションさせ、拡大しても劣化しないベクター図形のパスや塗りを動かします。
ロゴ・アイコン・図版・セクションの区切りなど、ベクター図形をいかした表現に向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。