Archives

コピペで飾る！北欧風「鳥のモチーフ」SVG素材集（全6色・HTMLコード付）

manaoの素材箱
Screenshot

はじめに

Manao
Manao
ブログに彩りを添える、シンプルで可愛い北欧風の素材を作りたいんだけど……Gemini、何か良いアイデアはある？
Gemini
Gemini
それなら「北欧風の鳥のモチーフ」はいかがでしょうか？軽量で扱いやすいSVG形式なら、ブログの表示速度を落とさず、デジタルシールのようにおしゃれに飾れますよ！

今回の記事では、Manaoさんと一緒に考えた「北欧風・鳥のSVG素材」を全6色のバリエーションで公開します。コピペだけで使えるHTMLコード付きですので、ぜひあなたのブログでも活用してみてくださいね。

<svg viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet" style="aspect-ratio: 1 / 1; height: auto !important;" xmlns="http://www.w3.org/2000/svg">
  <path d="M50,120 Q50,60 110,60 C150,60 160,90 160,100 Q160,130 130,140 L50,140 Z" fill="#4A90E2" />
  <path d="M80,100 Q100,80 130,100 Q110,120 80,115 Z" fill="#FFB74D" />
  <circle cx="140" cy="90" r="3" fill="#333333" />
  <path d="M160,95 L175,100 L160,105 Z" fill="#E67E22" />
  <line x1="90" y1="140" x2="90" y2="160" stroke="#555" stroke-width="3" stroke-linecap="round" />
  <line x1="110" y1="140" x2="110" y2="160" stroke="#555" stroke-width="3" stroke-linecap="round" />
</svg>
<svg viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet" style="aspect-ratio: 1 / 1; height: auto !important;" xmlns="http://www.w3.org/2000/svg">
  <path d="M50,120 Q50,60 110,60 C150,60 160,90 160,100 Q160,130 130,140 L50,140 Z" fill="#8DA69E" />
  <path d="M80,100 Q100,80 130,100 Q110,120 80,115 Z" fill="#D4B06D" />
  <circle cx="140" cy="90" r="3" fill="#333333" />
  <path d="M160,95 L175,100 L160,105 Z" fill="#BB863E" />
  <line x1="90" y1="140" x2="90" y2="160" stroke="#555" stroke-width="3" stroke-linecap="round" />
  <line x1="110" y1="140" x2="110" y2="160" stroke="#555" stroke-width="3" stroke-linecap="round" />
</svg>
<svg viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet" style="aspect-ratio: 1 / 1; height: auto !important;" xmlns="http://www.w3.org/2000/svg">
  <path d="M50,120 Q50,60 110,60 C150,60 160,90 160,100 Q160,130 130,140 L50,140 Z" fill="#545E66" />
  <path d="M80,100 Q100,80 130,100 Q110,120 80,115 Z" fill="#AAB8C2" />
  <circle cx="140" cy="90" r="3" fill="#FFFFFF" />
  <path d="M160,95 L175,100 L160,105 Z" fill="#8E8E8E" />
  <line x1="90" y1="140" x2="90" y2="160" stroke="#333" stroke-width="3" stroke-linecap="round" />
  <line x1="110" y1="140" x2="110" y2="160" stroke="#333" stroke-width="3" stroke-linecap="round" />
</svg>

Scandinavian Bird Color Collection

Nordic Blue

Sage Green

Classic Gray

Mustard Yellow

Coral Pink

Lavender

まとめ

お気に入りのカラーは見つかりましたか？今回のポイントを振り返ってみましょう。

  • ✔ SVG形式なので、拡大しても画像がぼけず、色変更も自由自在です。
  • ✔ レスポンシブ対応のギャラリー形式で、スマホからも美しく見えます。
  • ✔ あなたのブログのアクセントとして自由にお使いください。
Manao

Manao

「ぜひ使ってみてね！」

Gemini

Gemini

「素敵なブログになりますように。」

コメント

タイトルとURLをコピーしました