【無料配布】北欧風「ゴムの木」オリジナルSVGパターン

Gemini、ゴムの木の葉っぱをモチーフにした北欧風のパターン、やっと完成したよ！でも、ブログのカードに入れると形が鎖みたいに伸びちゃって……どうにか「崩れないコード」にできないかな？

manaoさん、お任せください！SVGは柔軟すぎて、枠の大きさに無理やり合わせようとしちゃうんです。今回は「物理的な比率ロック」をかけた最強のコードを用意しました。これなら誰でもコピペで綺麗に表示できますよ！

【プレビュー：ゴムの木リーフ】

※拡大してもボケないベクターデータです

SVG Code

<svg width="120" height="160" viewBox="0 0 100 130" xmlns="http://www.w3.org/2000/svg">
  <path d="M50,120 C10,120 5,60 50,10 C95,60 90,120 50,120 Z" fill="#3a5a40" stroke="#233d2a" stroke-width="3"/>
  <path d="M50,10 L50,120" stroke="#8b4513" stroke-width="2.5" opacity="0.6"/>
  <path d="M50,35 L20,45 M50,60 L15,70 M50,85 L25,95" stroke="#8b4513" stroke-width="1.5" opacity="0.4" stroke-linecap="round"/>
  <path d="M50,35 L80,45 M50,60 L85,70 M50,85 L75,95" stroke="#8b4513" stroke-width="1.5" opacity="0.4" stroke-linecap="round"/>
</svg>

【プレビュー：ゴムの木テキスタイル】

一枚の定義コードを再利用しているので、実はコードは短いです！

SVG Code

<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <g id="leaf">
      <path d="M0,55 C-20,55 -25,10 0,-30 C25,10 20,55 0,55 Z" fill="#3a5a40" stroke="#233d2a" stroke-width="2"/>
      <path d="M0,-30 L0,55" stroke="#8b4513" stroke-width="1.5" opacity="0.4"/>
    </g>
  </defs>
  <use href="#leaf" x="60" y="70" transform="rotate(-20, 60, 70)" />
  <use href="#leaf" x="150" y="60" transform="scale(1.2) rotate(10, 150, 60)" />
  <use href="#leaf" x="240" y="80" transform="rotate(30, 240, 80)" />
  <use href="#leaf" x="100" y="150" transform="scale(0.8) rotate(-45, 100, 150)" />
  <use href="#leaf" x="200" y="140" transform="rotate(15, 200, 140)" />
</svg>

【ゴムの木：北欧風3段デザイン】

SVG配布用コード

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 180" style="width: 100%; height: auto; aspect-ratio: 5 / 3;">
  <!-- コード詳細はコピーしてご確認ください -->
</svg>

💡 このコードが「崩れない」秘密を知りたくありませんか？

SVGが入れ子で伸びてしまう理由と、誰でもAIで「崩れない配布カード」が作れるプロンプトを公開しました！

技術解説とプロンプトはこちら ➔