温柔的 SVG 花房

Daisy SVG Studio

把心里的形状写成代码，右侧实时绽放；一键导出 PNG，留住柔软的光线与温度。

实时渲染

安全预览

PNG 下载

粘贴 / 撰写 SVG

小心翼翼地写下曲线，任意标签都可尝试，左侧温暖光晕会帮你托住它。

Soft Live

<svg width="720" height="520" viewBox="0 0 720 520" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="dawn" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#ffe2d5" />
      <stop offset="50%" stop-color="#ffeedd" />
      <stop offset="100%" stop-color="#f9e6ff" />
    </linearGradient>
    <radialGradient id="breeze" cx="50%" cy="35%" r="70%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.9" />
      <stop offset="100%" stop-color="#ffcbb0" stop-opacity="0.2" />
    </radialGradient>
  </defs>
  <rect width="720" height="520" fill="url(#dawn)" rx="28" />
  <rect x="40" y="40" width="640" height="440" fill="url(#breeze)" rx="24" />
  <g id="daisy" transform="translate(180 150)">
    <g transform="translate(0 160)">
      <line x1="0" y1="50" x2="0" y2="190" stroke="#7cb28f" stroke-width="8" stroke-linecap="round" />
      <ellipse cx="0" cy="40" rx="56" ry="56" fill="#fff7f0" />
      <circle cx="0" cy="40" r="20" fill="#ffbe88" />
      <g fill="#ffd0b3" transform="translate(0 40)">
        <ellipse rx="18" ry="56" transform="rotate(12)" />
        <ellipse rx="18" ry="56" transform="rotate(42)" />
        <ellipse rx="18" ry="56" transform="rotate(72)" />
        <ellipse rx="18" ry="56" transform="rotate(102)" />
        <ellipse rx="18" ry="56" transform="rotate(132)" />
        <ellipse rx="18" ry="56" transform="rotate(162)" />
        <ellipse rx="18" ry="56" transform="rotate(192)" />
        <ellipse rx="18" ry="56" transform="rotate(222)" />
        <ellipse rx="18" ry="56" transform="rotate(252)" />
        <ellipse rx="18" ry="56" transform="rotate(282)" />
        <ellipse rx="18" ry="56" transform="rotate(312)" />
        <ellipse rx="18" ry="56" transform="rotate(342)" />
      </g>
    </g>
    <g transform="translate(220 100) scale(0.86)">
      <line x1="0" y1="90" x2="0" y2="230" stroke="#8ebfa0" stroke-width="8" stroke-linecap="round" />
      <ellipse cx="0" cy="80" rx="58" ry="58" fill="#fff7f0" />
      <circle cx="0" cy="80" r="22" fill="#ffb66d" />
      <g fill="#ffd9c3" transform="translate(0 80)">
        <ellipse rx="18" ry="60" transform="rotate(18)" />
        <ellipse rx="18" ry="60" transform="rotate(48)" />
        <ellipse rx="18" ry="60" transform="rotate(78)" />
        <ellipse rx="18" ry="60" transform="rotate(108)" />
        <ellipse rx="18" ry="60" transform="rotate(138)" />
        <ellipse rx="18" ry="60" transform="rotate(168)" />
        <ellipse rx="18" ry="60" transform="rotate(198)" />
        <ellipse rx="18" ry="60" transform="rotate(228)" />
        <ellipse rx="18" ry="60" transform="rotate(258)" />
        <ellipse rx="18" ry="60" transform="rotate(288)" />
        <ellipse rx="18" ry="60" transform="rotate(318)" />
        <ellipse rx="18" ry="60" transform="rotate(348)" />
      </g>
    </g>
  </g>
  <g fill="#f8c6b2" opacity="0.45">
    <circle cx="120" cy="120" r="26" />
    <circle cx="600" cy="80" r="34" />
    <circle cx="620" cy="430" r="40" />
    <circle cx="140" cy="410" r="34" />
    <circle cx="360" cy="70" r="24" />
  </g>
</svg>

支持 viewBox / gradient推荐内联资源

温馨提示：外链图片可能影响下载，请尽量内嵌。

柔光预览

耐心等一等，光线马上流动过来。

实时渲染右下角柔焦便签来自雏菊花房

你的线条正在柔软地发光