/*
Elastic shadow — drop-in 波打つ下方向シャドウ.
-----------------------------------------------------------------
使い方:
1. を に
2. を読み込み
3. 配置したい場所に以下を1行書くだけ:
色:
シャドウの色は currentColor を継承する。配置先の text color が反映される。
仕組み:
- 閉じたポリゴン (上端=波打つ曲線, 下端=平らな水平線) を SVG 内に描画
- 上から下へ薄くなる linearGradient で塗る
- 上端は sharp (フィルタを掛けない) のでウェーブ輪郭がはっきり残る
- 下方向にのみグラデーションで拡散する「光が上から当たって落ちる影」表現
- シャドウは SVG の高さを越えて下方向へ伸びるため overflow: visible 必須
*/
.elastic-shadow {
display: block;
width: 100%;
height: 80px;
overflow: visible;
margin: 1.5em 0;
cursor: crosshair;
touch-action: pan-y;
color:#928e85;
}
.elastic-shadow path {
stroke: none;
/* fill は JS 側でインスタンス毎の linearGradient を割り当てる */
}