パーツ番号 07-08-02 ・ CSSのみ

抽象的な波線・曲線装飾グラフィック

有機的な曲線を重ねた静止装飾。ヒーローセクションの背景アクセントに利用しやすい。

staticcss

プレビュー

ソースコード

HTML

<svg class="wave07-08-02" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
          <path class="wave wave-a" d="M0,120 C60,60 120,180 180,100 C220,60 260,140 300,90"></path>
          <path class="wave wave-b" d="M0,150 C50,110 110,190 170,130 C230,80 260,160 300,120"></path>
          <path class="wave wave-c" d="M0,80 C40,40 90,120 150,70 C200,30 250,100 300,60"></path>
          <path class="wave wave-d" d="M0,170 C60,150 120,190 180,165 C220,150 260,175 300,160"></path>
        </svg>

CSS

.d07-08-02 .wave07-08-02{
          width:100%;
          height:100%;
          display:block;
        }
        .d07-08-02 .wave{
          fill:none;
          stroke-width:6;
          stroke-linecap:round;
        }
        .d07-08-02 .wave-a{
          stroke:#2563eb;
          opacity:.85;
        }
        .d07-08-02 .wave-b{
          stroke:#38bdf8;
          opacity:.6;
          stroke-width:5;
        }
        .d07-08-02 .wave-c{
          stroke:#f59e0b;
          opacity:.7;
          stroke-width:4;
        }
        .d07-08-02 .wave-d{
          stroke:#94a3b8;
          opacity:.4;
          stroke-width:3;
        }

クラス名 .d07-08-02 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。