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

花・植物モチーフの装飾イラスト

シンプルな一輪の花をかたどった静止イラスト。ナチュラル系サイトの見出し装飾に向く。

staticcss

プレビュー

ソースコード

HTML

<svg class="flower07-08-04" viewBox="0 0 200 220" xmlns="http://www.w3.org/2000/svg">
          <path class="stem" d="M100,215 L100,120"></path>
          <path class="leaf leaf-l" d="M100,178 C70,173 55,153 65,133 C90,138 100,158 100,178 Z"></path>
          <path class="leaf leaf-r" d="M100,158 C130,153 145,138 138,118 C112,123 100,143 100,158 Z"></path>
          <g class="petals">
            <ellipse class="petal" cx="100" cy="66" rx="18" ry="34" transform="rotate(0 100 100)"></ellipse>
            <ellipse class="petal" cx="100" cy="66" rx="18" ry="34" transform="rotate(60 100 100)"></ellipse>
            <ellipse class="petal" cx="100" cy="66" rx="18" ry="34" transform="rotate(120 100 100)"></ellipse>
            <ellipse class="petal" cx="100" cy="66" rx="18" ry="34" transform="rotate(180 100 100)"></ellipse>
            <ellipse class="petal" cx="100" cy="66" rx="18" ry="34" transform="rotate(240 100 100)"></ellipse>
            <ellipse class="petal" cx="100" cy="66" rx="18" ry="34" transform="rotate(300 100 100)"></ellipse>
          </g>
          <circle class="center" cx="100" cy="100" r="15"></circle>
        </svg>

CSS

.d07-08-04 .flower07-08-04{
          width:70%;
          height:100%;
        }
        .d07-08-04 .stem{
          stroke:#4ade80;
          stroke-width:5;
          fill:none;
        }
        .d07-08-04 .leaf{
          fill:#4ade80;
        }
        .d07-08-04 .leaf-l{
          opacity:.9;
        }
        .d07-08-04 .leaf-r{
          opacity:.75;
        }
        .d07-08-04 .petal{
          fill:#f9a8d4;
          opacity:.9;
        }
        .d07-08-04 .center{
          fill:#f59e0b;
        }

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