Gemini4 - SVG Viewer

0OyL1kwK

N/A

6.2 KB4.04 KB-35%

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 400" width="100%" height="100%">
  <defs>
    
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#e0f4ff"></stop>
      <stop offset="100%" stop-color="#f7fcff"></stop>
    </linearGradient>
    <linearGradient id="pouchGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#ffb703"></stop>
      <stop offset="100%" stop-color="#fb8500"></stop>
    </linearGradient>
  </defs>

<rect width="500" height="400" fill="url(#sky)" rx="16"></rect>
  
  
  <line x1="40" y1="352" x2="460" y2="352" stroke="#94a3b8" stroke-width="4" stroke-linecap="round"></line>
  <line x1="70" y1="364" x2="150" y2="364" stroke="#cbd5e1" stroke-width="3" stroke-linecap="round"></line>
  <line x1="280" y1="364" x2="390" y2="364" stroke="#cbd5e1" stroke-width="3" stroke-linecap="round"></line>
  <line x1="45" y1="120" x2="95" y2="120" stroke="#bae6fd" stroke-width="3" stroke-linecap="round"></line>
  <line x1="65" y1="140" x2="105" y2="140" stroke="#bae6fd" stroke-width="3" stroke-linecap="round"></line>

<g stroke="#e06d06" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" fill="none">
    <path d="M 210 185 L 195 250 L 215 315"></path>
  </g>
  
  <path d="M 212 315 L 232 308 L 230 318 L 210 318 Z" fill="#e06d06"></path>

<g id="wheels">
    
    <g transform="translate(140, 290)">
      <circle r="56" fill="none" stroke="#1e293b" stroke-width="10"></circle>
      <circle r="49" fill="none" stroke="#cbd5e1" stroke-width="3"></circle>
      
      <g stroke="#94a3b8" stroke-width="1.5">
        <line x1="-49" y1="0" x2="49" y2="0"></line>
        <line x1="0" y1="-49" x2="0" y2="49"></line>
        <line x1="-35" y1="-35" x2="35" y2="35"></line>
        <line x1="-35" y1="35" x2="35" y2="-35"></line>
      </g>
      <circle r="7" fill="#475569"></circle>
    </g>

<g transform="translate(360, 290)">
      <circle r="56" fill="none" stroke="#1e293b" stroke-width="10"></circle>
      <circle r="49" fill="none" stroke="#cbd5e1" stroke-width="3"></circle>
      
      <g stroke="#94a3b8" stroke-width="1.5">
        <line x1="-49" y1="0" x2="49" y2="0"></line>
        <line x1="0" y1="-49" x2="0" y2="49"></line>
        <line x1="-35" y1="-35" x2="35" y2="35"></line>
        <line x1="-35" y1="35" x2="35" y2="-35"></line>
      </g>
      <circle r="7" fill="#475569"></circle>
    </g>
  </g>

<line x1="235" y1="290" x2="215" y2="315" stroke="#475569" stroke-width="6" stroke-linecap="round"></line>
  <line x1="205" y1="315" x2="225" y2="315" stroke="#1e293b" stroke-width="5" stroke-linecap="round"></line>

<path d="M 140 283 L 235 274 A 16 16 0 0 1 235 306 L 140 297 A 7 7 0 0 1 140 283 Z" fill="none" stroke="#64748b" stroke-width="3" stroke-dasharray="4,2"></path>

<g stroke="#e63946" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" fill="none">
    
    <line x1="140" y1="290" x2="235" y2="290"></line>
    
    <line x1="140" y1="290" x2="202" y2="215"></line>
    
    <line x1="235" y1="290" x2="198" y2="205"></line>
    
    <line x1="235" y1="290" x2="334" y2="215"></line>
    
    <line x1="202" y1="215" x2="330" y2="205"></line>
    
    <line x1="330" y1="198" x2="360" y2="290"></line>
  </g>

<path d="M 330 198 L 322 172 Q 318 162 305 168 L 292 174" fill="none" stroke="#94a3b8" stroke-width="6" stroke-linecap="round"></path>
  
  <line x1="286" y1="176" x2="300" y2="170" stroke="#1e293b" stroke-width="8" stroke-linecap="round"></line>

<line x1="198" y1="205" x2="193" y2="192" stroke="#94a3b8" stroke-width="6"></line>
  <path d="M 175 192 Q 195 192 212 187 Q 202 199 180 198 Z" fill="#1e293b"></path>

<circle cx="235" cy="290" r="16" fill="#cbd5e1" stroke="#475569" stroke-width="4"></circle>
  <circle cx="235" cy="290" r="5" fill="#475569"></circle>

<path d="M 172 175 L 145 162 L 155 174 L 142 180 L 168 185 Z" fill="#e2e8f0" stroke="#475569" stroke-width="2.5" stroke-linejoin="round"></path>

<path d="M 170 178 C 165 145, 210 125, 250 142 C 268 150, 265 182, 238 192 C 210 202, 175 195, 170 178 Z" fill="#ffffff" stroke="#475569" stroke-width="3"></path>

<path d="M 238 148 C 252 132, 250 105, 248 85 C 246 68, 262 56, 276 62 C 290 68, 292 84, 282 95 C 272 108, 272 138, 256 162 Z" fill="#ffffff" stroke="#475569" stroke-width="3"></path>
  
  
  <path d="M 255 62 L 242 52 L 250 66 L 238 64 L 249 73" fill="#ffffff" stroke="#475569" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>

<path d="M 252 65 C 256 50, 278 50, 284 64 Z" fill="#2a9d8f" stroke="#1e293b" stroke-width="2.5"></path>
  <path d="M 280 62 L 296 58 C 296 63, 288 66, 282 65 Z" fill="#e76f51" stroke="#1e293b" stroke-width="2"></path>

<path d="M 278 86 C 282 135, 345 142, 378 88 Z" fill="url(#pouchGrad)" stroke="#9a3412" stroke-width="3" stroke-linejoin="round"></path>
  
  <path d="M 288 94 C 298 122, 338 125, 365 90" fill="none" stroke="#d97706" stroke-width="2" stroke-linecap="round"></path>
  
  <path d="M 280 73 L 380 82 C 384 83, 385 89, 379 91 L 376 89 L 276 86 Z" fill="#fde047" stroke="#9a3412" stroke-width="3" stroke-linejoin="round"></path>

<circle cx="272" cy="76" r="5" fill="#fef08a" stroke="#1e293b" stroke-width="2"></circle>
  <circle cx="274" cy="76" r="2.2" fill="#0f172a"></circle>

<g stroke="#fb8500" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" fill="none">
    <path d="M 225 188 L 262 222 L 255 265"></path>
  </g>
  
  <path d="M 250 264 L 274 258 L 271 268 L 248 268 Z" fill="#fb8500" stroke="#9a3412" stroke-width="1.5"></path>

<line x1="235" y1="290" x2="255" y2="265" stroke="#64748b" stroke-width="6" stroke-linecap="round"></line>
  <line x1="245" y1="268" x2="268" y2="268" stroke="#1e293b" stroke-width="5" stroke-linecap="round"></line>

<path d="M 218 152 C 235 142, 265 152, 292 172 C 282 182, 262 180, 248 175 C 232 178, 212 170, 218 152 Z" fill="#f8fafc" stroke="#475569" stroke-width="3" stroke-linejoin="round"></path>
  
  <path d="M 235 166 C 248 168, 260 165, 272 170" fill="none" stroke="#94a3b8" stroke-width="2.5" stroke-linecap="round"></path>
  <path d="M 225 160 C 238 162, 250 159, 262 164" fill="none" stroke="#94a3b8" stroke-width="2.5" stroke-linecap="round"></path>
</svg>

Upload

Preview React React Native PNG Data URI

6.2 KB4.04 KB-35%

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 400" width="100%" height="100%">
  <defs>
    
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#e0f4ff"></stop>
      <stop offset="100%" stop-color="#f7fcff"></stop>
    </linearGradient>
    <linearGradient id="pouchGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#ffb703"></stop>
      <stop offset="100%" stop-color="#fb8500"></stop>
    </linearGradient>
  </defs>

<rect width="500" height="400" fill="url(#sky)" rx="16"></rect>
  
  
  <line x1="40" y1="352" x2="460" y2="352" stroke="#94a3b8" stroke-width="4" stroke-linecap="round"></line>
  <line x1="70" y1="364" x2="150" y2="364" stroke="#cbd5e1" stroke-width="3" stroke-linecap="round"></line>
  <line x1="280" y1="364" x2="390" y2="364" stroke="#cbd5e1" stroke-width="3" stroke-linecap="round"></line>
  <line x1="45" y1="120" x2="95" y2="120" stroke="#bae6fd" stroke-width="3" stroke-linecap="round"></line>
  <line x1="65" y1="140" x2="105" y2="140" stroke="#bae6fd" stroke-width="3" stroke-linecap="round"></line>

<g stroke="#e06d06" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" fill="none">
    <path d="M 210 185 L 195 250 L 215 315"></path>
  </g>
  
  <path d="M 212 315 L 232 308 L 230 318 L 210 318 Z" fill="#e06d06"></path>

<g id="wheels">
    
    <g transform="translate(140, 290)">
      <circle r="56" fill="none" stroke="#1e293b" stroke-width="10"></circle>
      <circle r="49" fill="none" stroke="#cbd5e1" stroke-width="3"></circle>
      
      <g stroke="#94a3b8" stroke-width="1.5">
        <line x1="-49" y1="0" x2="49" y2="0"></line>
        <line x1="0" y1="-49" x2="0" y2="49"></line>
        <line x1="-35" y1="-35" x2="35" y2="35"></line>
        <line x1="-35" y1="35" x2="35" y2="-35"></line>
      </g>
      <circle r="7" fill="#475569"></circle>
    </g>

<g transform="translate(360, 290)">
      <circle r="56" fill="none" stroke="#1e293b" stroke-width="10"></circle>
      <circle r="49" fill="none" stroke="#cbd5e1" stroke-width="3"></circle>
      
      <g stroke="#94a3b8" stroke-width="1.5">
        <line x1="-49" y1="0" x2="49" y2="0"></line>
        <line x1="0" y1="-49" x2="0" y2="49"></line>
        <line x1="-35" y1="-35" x2="35" y2="35"></line>
        <line x1="-35" y1="35" x2="35" y2="-35"></line>
      </g>
      <circle r="7" fill="#475569"></circle>
    </g>
  </g>

<line x1="235" y1="290" x2="215" y2="315" stroke="#475569" stroke-width="6" stroke-linecap="round"></line>
  <line x1="205" y1="315" x2="225" y2="315" stroke="#1e293b" stroke-width="5" stroke-linecap="round"></line>

<path d="M 140 283 L 235 274 A 16 16 0 0 1 235 306 L 140 297 A 7 7 0 0 1 140 283 Z" fill="none" stroke="#64748b" stroke-width="3" stroke-dasharray="4,2"></path>

<g stroke="#e63946" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" fill="none">
    
    <line x1="140" y1="290" x2="235" y2="290"></line>
    
    <line x1="140" y1="290" x2="202" y2="215"></line>
    
    <line x1="235" y1="290" x2="198" y2="205"></line>
    
    <line x1="235" y1="290" x2="334" y2="215"></line>
    
    <line x1="202" y1="215" x2="330" y2="205"></line>
    
    <line x1="330" y1="198" x2="360" y2="290"></line>
  </g>

<path d="M 330 198 L 322 172 Q 318 162 305 168 L 292 174" fill="none" stroke="#94a3b8" stroke-width="6" stroke-linecap="round"></path>
  
  <line x1="286" y1="176" x2="300" y2="170" stroke="#1e293b" stroke-width="8" stroke-linecap="round"></line>

<line x1="198" y1="205" x2="193" y2="192" stroke="#94a3b8" stroke-width="6"></line>
  <path d="M 175 192 Q 195 192 212 187 Q 202 199 180 198 Z" fill="#1e293b"></path>

<circle cx="235" cy="290" r="16" fill="#cbd5e1" stroke="#475569" stroke-width="4"></circle>
  <circle cx="235" cy="290" r="5" fill="#475569"></circle>

<path d="M 172 175 L 145 162 L 155 174 L 142 180 L 168 185 Z" fill="#e2e8f0" stroke="#475569" stroke-width="2.5" stroke-linejoin="round"></path>

<path d="M 170 178 C 165 145, 210 125, 250 142 C 268 150, 265 182, 238 192 C 210 202, 175 195, 170 178 Z" fill="#ffffff" stroke="#475569" stroke-width="3"></path>

<path d="M 238 148 C 252 132, 250 105, 248 85 C 246 68, 262 56, 276 62 C 290 68, 292 84, 282 95 C 272 108, 272 138, 256 162 Z" fill="#ffffff" stroke="#475569" stroke-width="3"></path>
  
  
  <path d="M 255 62 L 242 52 L 250 66 L 238 64 L 249 73" fill="#ffffff" stroke="#475569" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>

<path d="M 252 65 C 256 50, 278 50, 284 64 Z" fill="#2a9d8f" stroke="#1e293b" stroke-width="2.5"></path>
  <path d="M 280 62 L 296 58 C 296 63, 288 66, 282 65 Z" fill="#e76f51" stroke="#1e293b" stroke-width="2"></path>

<path d="M 278 86 C 282 135, 345 142, 378 88 Z" fill="url(#pouchGrad)" stroke="#9a3412" stroke-width="3" stroke-linejoin="round"></path>
  
  <path d="M 288 94 C 298 122, 338 125, 365 90" fill="none" stroke="#d97706" stroke-width="2" stroke-linecap="round"></path>
  
  <path d="M 280 73 L 380 82 C 384 83, 385 89, 379 91 L 376 89 L 276 86 Z" fill="#fde047" stroke="#9a3412" stroke-width="3" stroke-linejoin="round"></path>

<circle cx="272" cy="76" r="5" fill="#fef08a" stroke="#1e293b" stroke-width="2"></circle>
  <circle cx="274" cy="76" r="2.2" fill="#0f172a"></circle>

<g stroke="#fb8500" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" fill="none">
    <path d="M 225 188 L 262 222 L 255 265"></path>
  </g>
  
  <path d="M 250 264 L 274 258 L 271 268 L 248 268 Z" fill="#fb8500" stroke="#9a3412" stroke-width="1.5"></path>

<line x1="235" y1="290" x2="255" y2="265" stroke="#64748b" stroke-width="6" stroke-linecap="round"></line>
  <line x1="245" y1="268" x2="268" y2="268" stroke="#1e293b" stroke-width="5" stroke-linecap="round"></line>

<path d="M 218 152 C 235 142, 265 152, 292 172 C 282 182, 262 180, 248 175 C 232 178, 212 170, 218 152 Z" fill="#f8fafc" stroke="#475569" stroke-width="3" stroke-linejoin="round"></path>
  
  <path d="M 235 166 C 248 168, 260 165, 272 170" fill="none" stroke="#94a3b8" stroke-width="2.5" stroke-linecap="round"></path>
  <path d="M 225 160 C 238 162, 250 159, 262 164" fill="none" stroke="#94a3b8" stroke-width="2.5" stroke-linecap="round"></path>
</svg>

Upload