DNq3oGMB - SVG Viewer

DNq3oGMB

N/A

4.59 KB3.05 KB-34%

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <rect width="800" height="600" fill="#87CEEB"></rect>
  <path d="M0 450 H800 V600 H0 Z" fill="#a0a0a0"></path> <path d="M0 400 Q200 350 400 400 T800 350 V450 H0 Z" fill="#228B22"></path> <g opacity="0.8">
    <ellipse cx="150" cy="100" rx="60" ry="30" fill="#fff"></ellipse>
    <ellipse cx="220" cy="120" rx="50" ry="25" fill="#fff"></ellipse>
    <ellipse cx="600" cy="80" rx="70" ry="35" fill="#fff"></ellipse>
  </g>

<g transform="translate(150, 250)">
    <g>
      <circle cx="100" cy="200" r="70" fill="none" stroke="#333" stroke-width="10"></circle> <circle cx="100" cy="200" r="60" fill="none" stroke="#ccc" stroke-width="5"></circle> <g stroke="#ccc" stroke-width="2"> <line x1="100" y1="200" x2="100" y2="140"></line>
        <line x1="100" y1="200" x2="160" y2="200"></line>
        <line x1="100" y1="200" x2="100" y2="260"></line>
        <line x1="100" y1="200" x2="40" y2="200"></line>
        <line x1="100" y1="200" x2="142.4" y2="157.6"></line>
        <line x1="100" y1="200" x2="142.4" y2="242.4"></line>
        <line x1="100" y1="200" x2="57.6" y2="242.4"></line>
        <line x1="100" y1="200" x2="57.6" y2="157.6"></line>
      </g>
    </g>
    <g>
      <circle cx="350" cy="200" r="70" fill="none" stroke="#333" stroke-width="10"></circle> <circle cx="350" cy="200" r="60" fill="none" stroke="#ccc" stroke-width="5"></circle> <g stroke="#ccc" stroke-width="2"> <line x1="350" y1="200" x2="350" y2="140"></line>
        <line x1="350" y1="200" x2="410" y2="200"></line>
        <line x1="350" y1="200" x2="350" y2="260"></line>
        <line x1="350" y1="200" x2="290" y2="200"></line>
        <line x1="350" y1="200" x2="392.4" y2="157.6"></line>
        <line x1="350" y1="200" x2="392.4" y2="242.4"></line>
        <line x1="350" y1="200" x2="307.6" y2="242.4"></line>
        <line x1="350" y1="200" x2="307.6" y2="157.6"></line>
      </g>
      <circle cx="350" cy="200" r="15" fill="#888"></circle> </g>

<path d="M100 200 L180 100 L320 100 L350 200 L240 230 L180 100 M240 230 L280 120" fill="none" stroke="#007bff" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></path>
    <path d="M320 100 L280 120" fill="none" stroke="#007bff" stroke-width="10" stroke-linecap="round"></path> <path d="M180 100 L170 70 L150 65" fill="none" stroke="#ccc" stroke-width="8" stroke-linecap="round"></path>
    <rect x="130" y="60" width="40" height="10" rx="5" fill="#654321"></rect> <path d="M280 120 L270 90" fill="none" stroke="#ccc" stroke-width="8"></path>
    <path d="M250 90 Q270 70 310 90 Q300 110 250 90 Z" fill="#654321"></path> <circle cx="240" cy="230" r="20" fill="#888"></circle> <line x1="240" y1="230" x2="240" y2="270" stroke="#ccc" stroke-width="8" stroke-linecap="round"></line> <rect x="225" y="265" width="30" height="10" rx="3" fill="#333"></rect> </g>

<g transform="translate(220, 130)">
    <path d="M130 180 Q160 220 200 200 Q240 180 230 140 Q220 100 180 100 Q140 100 130 130 Q120 160 130 180 Z" fill="#fff" stroke="#ccc" stroke-width="2"></path>
    <path d="M130 180 Q110 200 120 220 L160 240 Q190 230 200 200" fill="#f0f0f0"></path> <path d="M160 130 Q120 120 100 150 Q90 170 120 180 Q140 170 160 130 Z" fill="#fff" stroke="#ccc" stroke-width="2"></path>
    <path d="M100 150 Q90 160 100 180 L120 190" fill="#f0f0f0"></path> <path d="M90 175 Q70 170 65 150 Q70 180 80 200 Q100 190 110 180" fill="#666"></path> <path d="M180 100 Q190 70 170 50 Q150 30 120 40 Q90 50 100 80 Q110 110 130 130" fill="#fff" stroke="#ccc" stroke-width="2"></path>
    <circle cx="135" cy="65" r="5" fill="#000"></circle> <path d="M170 50 Q220 50 250 80 Q240 110 200 110 L180 100" fill="#FFA500" stroke="#FF8C00" stroke-width="2"></path> <path d="M180 100 Q200 150 150 160 Q120 150 110 120 L130 130" fill="#FFC0CB" stroke="#FFB6C1" stroke-width="2" opacity="0.9"></path> <path d="M250 80 Q240 90 230 90 L200 110" fill="#FF8C00"></path> <g transform="translate(0, 0)"> <path d="M170 220 L160 260" stroke="#FFA500" stroke-width="8" stroke-linecap="round"></path>
      <path d="M150 260 L180 260 L190 280 L140 280 L150 260 Z" fill="#FFA500" stroke="#FF8C00" stroke-width="2"></path> </g>
     <g transform="translate(20, -20)"> <path d="M170 220 L160 250" stroke="#FFA500" stroke-width="8" stroke-linecap="round" opacity="0.8"></path>
      <path d="M150 250 L180 250 L190 270 L140 270 L150 250 Z" fill="#FFA500" stroke="#FF8C00" stroke-width="2" opacity="0.8"></path> </g>

<path d="M120 40 Q110 20 130 25 Q140 30 135 45" fill="#fff" stroke="#ccc" stroke-width="1"></path>
  </g>

<path d="M390 450 L500 480" stroke="#888" stroke-width="4" stroke-dasharray="10,5"></path>
</svg>

Upload

Preview React React Native PNG Data URI

4.59 KB3.05 KB-34%

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <rect width="800" height="600" fill="#87CEEB"></rect>
  <path d="M0 450 H800 V600 H0 Z" fill="#a0a0a0"></path> <path d="M0 400 Q200 350 400 400 T800 350 V450 H0 Z" fill="#228B22"></path> <g opacity="0.8">
    <ellipse cx="150" cy="100" rx="60" ry="30" fill="#fff"></ellipse>
    <ellipse cx="220" cy="120" rx="50" ry="25" fill="#fff"></ellipse>
    <ellipse cx="600" cy="80" rx="70" ry="35" fill="#fff"></ellipse>
  </g>

<g transform="translate(150, 250)">
    <g>
      <circle cx="100" cy="200" r="70" fill="none" stroke="#333" stroke-width="10"></circle> <circle cx="100" cy="200" r="60" fill="none" stroke="#ccc" stroke-width="5"></circle> <g stroke="#ccc" stroke-width="2"> <line x1="100" y1="200" x2="100" y2="140"></line>
        <line x1="100" y1="200" x2="160" y2="200"></line>
        <line x1="100" y1="200" x2="100" y2="260"></line>
        <line x1="100" y1="200" x2="40" y2="200"></line>
        <line x1="100" y1="200" x2="142.4" y2="157.6"></line>
        <line x1="100" y1="200" x2="142.4" y2="242.4"></line>
        <line x1="100" y1="200" x2="57.6" y2="242.4"></line>
        <line x1="100" y1="200" x2="57.6" y2="157.6"></line>
      </g>
    </g>
    <g>
      <circle cx="350" cy="200" r="70" fill="none" stroke="#333" stroke-width="10"></circle> <circle cx="350" cy="200" r="60" fill="none" stroke="#ccc" stroke-width="5"></circle> <g stroke="#ccc" stroke-width="2"> <line x1="350" y1="200" x2="350" y2="140"></line>
        <line x1="350" y1="200" x2="410" y2="200"></line>
        <line x1="350" y1="200" x2="350" y2="260"></line>
        <line x1="350" y1="200" x2="290" y2="200"></line>
        <line x1="350" y1="200" x2="392.4" y2="157.6"></line>
        <line x1="350" y1="200" x2="392.4" y2="242.4"></line>
        <line x1="350" y1="200" x2="307.6" y2="242.4"></line>
        <line x1="350" y1="200" x2="307.6" y2="157.6"></line>
      </g>
      <circle cx="350" cy="200" r="15" fill="#888"></circle> </g>

<path d="M100 200 L180 100 L320 100 L350 200 L240 230 L180 100 M240 230 L280 120" fill="none" stroke="#007bff" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></path>
    <path d="M320 100 L280 120" fill="none" stroke="#007bff" stroke-width="10" stroke-linecap="round"></path> <path d="M180 100 L170 70 L150 65" fill="none" stroke="#ccc" stroke-width="8" stroke-linecap="round"></path>
    <rect x="130" y="60" width="40" height="10" rx="5" fill="#654321"></rect> <path d="M280 120 L270 90" fill="none" stroke="#ccc" stroke-width="8"></path>
    <path d="M250 90 Q270 70 310 90 Q300 110 250 90 Z" fill="#654321"></path> <circle cx="240" cy="230" r="20" fill="#888"></circle> <line x1="240" y1="230" x2="240" y2="270" stroke="#ccc" stroke-width="8" stroke-linecap="round"></line> <rect x="225" y="265" width="30" height="10" rx="3" fill="#333"></rect> </g>

<g transform="translate(220, 130)">
    <path d="M130 180 Q160 220 200 200 Q240 180 230 140 Q220 100 180 100 Q140 100 130 130 Q120 160 130 180 Z" fill="#fff" stroke="#ccc" stroke-width="2"></path>
    <path d="M130 180 Q110 200 120 220 L160 240 Q190 230 200 200" fill="#f0f0f0"></path> <path d="M160 130 Q120 120 100 150 Q90 170 120 180 Q140 170 160 130 Z" fill="#fff" stroke="#ccc" stroke-width="2"></path>
    <path d="M100 150 Q90 160 100 180 L120 190" fill="#f0f0f0"></path> <path d="M90 175 Q70 170 65 150 Q70 180 80 200 Q100 190 110 180" fill="#666"></path> <path d="M180 100 Q190 70 170 50 Q150 30 120 40 Q90 50 100 80 Q110 110 130 130" fill="#fff" stroke="#ccc" stroke-width="2"></path>
    <circle cx="135" cy="65" r="5" fill="#000"></circle> <path d="M170 50 Q220 50 250 80 Q240 110 200 110 L180 100" fill="#FFA500" stroke="#FF8C00" stroke-width="2"></path> <path d="M180 100 Q200 150 150 160 Q120 150 110 120 L130 130" fill="#FFC0CB" stroke="#FFB6C1" stroke-width="2" opacity="0.9"></path> <path d="M250 80 Q240 90 230 90 L200 110" fill="#FF8C00"></path> <g transform="translate(0, 0)"> <path d="M170 220 L160 260" stroke="#FFA500" stroke-width="8" stroke-linecap="round"></path>
      <path d="M150 260 L180 260 L190 280 L140 280 L150 260 Z" fill="#FFA500" stroke="#FF8C00" stroke-width="2"></path> </g>
     <g transform="translate(20, -20)"> <path d="M170 220 L160 250" stroke="#FFA500" stroke-width="8" stroke-linecap="round" opacity="0.8"></path>
      <path d="M150 250 L180 250 L190 270 L140 270 L150 250 Z" fill="#FFA500" stroke="#FF8C00" stroke-width="2" opacity="0.8"></path> </g>

<path d="M120 40 Q110 20 130 25 Q140 30 135 45" fill="#fff" stroke="#ccc" stroke-width="1"></path>
  </g>

<path d="M390 450 L500 480" stroke="#888" stroke-width="4" stroke-dasharray="10,5"></path>
</svg>

Upload