SVG
Viewer
BiRht5hX
N/A
Send feedback
Terms & Conditions
Privacy Policy
Rotate
Flip Y
Flip X
-1px x -1px
Change dimensions
Trim Padding
Optimize
4.37 KB
2.86 KB
-34%
Prettify
Preferences
Clear
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="100%" height="100%"> <defs> <g id="spokes-small"> <line x1="0" y1="-22" x2="0" y2="22" stroke="#a8dadc" stroke-width="3"></line> <line x1="-22" y1="0" x2="22" y2="0" stroke="#a8dadc" stroke-width="3"></line> <line x1="-15" y1="-15" x2="15" y2="15" stroke="#a8dadc" stroke-width="3"></line> <line x1="-15" y1="15" x2="15" y2="-15" stroke="#a8dadc" stroke-width="3"></line> </g> <g id="spokes-large"> <line x1="0" y1="-38" x2="0" y2="38" stroke="#a8dadc" stroke-width="3"></line> <line x1="-38" y1="0" x2="38" y2="0" stroke="#a8dadc" stroke-width="3"></line> <line x1="-27" y1="-27" x2="27" y2="27" stroke="#a8dadc" stroke-width="3"></line> <line x1="-27" y1="27" x2="27" y2="-27" stroke="#a8dadc" stroke-width="3"></line> </g> </defs> <circle cx="200" cy="200" r="190" fill="#f0f8ff"></circle> <ellipse cx="190" cy="335" rx="140" ry="12" fill="rgba(0,0,0,0.1)"></ellipse> <path d="M 40 280 L 70 280 M 20 250 L 50 250 M 50 310 L 80 310" stroke="#ccc" stroke-width="4" stroke-linecap="round"></path> <g transform="translate(130, 275)"> <circle cx="0" cy="0" r="30" fill="#333"></circle> <circle cx="0" cy="0" r="22" fill="#f1faee"></circle> <use href="#spokes-small"></use> <circle cx="0" cy="0" r="6" fill="#e63946"></circle> </g> <g transform="translate(85, 185) rotate(-10)"> <ellipse cx="0" cy="0" rx="55" ry="22" fill="#7f4f24"></ellipse> <path d="M -30 -15 L -20 15 M -10 -20 L 0 20 M 10 -20 L 20 20 M 30 -15 L 40 15 M -40 -5 L 45 5 M -35 5 L 40 15" stroke="#5c3a21" stroke-width="2" stroke-linecap="round"></path> </g> <path d="M 90 300 L 150 200 L 260 220" fill="none" stroke="#e63946" stroke-width="14" stroke-linejoin="round"></path> <path d="M 280 300 L 240 140" fill="none" stroke="#e63946" stroke-width="12" stroke-linecap="round"></path> <rect x="120" y="185" width="50" height="15" rx="7" fill="#1d3557"></rect> <path d="M 240 140 L 230 125" stroke="#a8dadc" stroke-width="8" stroke-linecap="round"></path> <path d="M 240 140 Q 270 120 285 150" fill="none" stroke="#a8dadc" stroke-width="8" stroke-linecap="round"></path> <path d="M 278 140 L 292 155" stroke="#1d3557" stroke-width="14" stroke-linecap="round"></path> <path d="M 160 190 Q 180 240 230 250" fill="none" stroke="#7f4f24" stroke-width="20" stroke-linecap="round"></path> <ellipse cx="165" cy="150" rx="45" ry="65" fill="#9c6644" transform="rotate(15 165 150)"></ellipse> <ellipse cx="180" cy="155" rx="25" ry="55" fill="#b07d5b" transform="rotate(15 180 155)"></ellipse> <path d="M 160 190 Q 200 260 250 270" fill="none" stroke="#9c6644" stroke-width="22" stroke-linecap="round"></path> <g transform="translate(90, 300)"> <circle cx="0" cy="0" r="35" fill="#333"></circle> <circle cx="0" cy="0" r="26" fill="#f1faee"></circle> <use href="#spokes-small" transform="scale(1.18)"></use> <circle cx="0" cy="0" r="8" fill="#e63946"></circle> </g> <g transform="translate(280, 300)"> <circle cx="0" cy="0" r="50" fill="#333"></circle> <circle cx="0" cy="0" r="40" fill="#f1faee"></circle> <use href="#spokes-large"></use> <circle cx="0" cy="0" r="10" fill="#e63946"></circle> </g> <line x1="280" y1="300" x2="255" y2="270" stroke="#a8dadc" stroke-width="8" stroke-linecap="round"></line> <path d="M 235 260 L 270 255 L 280 275 L 245 280 Z" fill="#e76f51"></path> <rect x="240" y="265" width="30" height="12" rx="4" fill="#1d3557" transform="rotate(-15 255 270)"></rect> <circle cx="190" cy="85" r="36" fill="#9c6644"></circle> <path d="M 215 75 C 250 65, 285 75, 280 100 C 275 115, 230 110, 215 105 Z" fill="#e76f51"></path> <circle cx="205" cy="75" r="5" fill="#111"></circle> <circle cx="207" cy="73" r="1.5" fill="#fff"></circle> <g transform="translate(0, -5)"> <path d="M 155 85 Q 185 30 225 85 Z" fill="#457b9d"></path> <path d="M 185 50 Q 195 40 205 85 L 175 85 Z" fill="#e9c46a"></path> <path d="M 145 85 L 235 85" stroke="#1d3557" stroke-width="6" stroke-linecap="round"></path> <path d="M 190 85 Q 185 125 210 110" fill="none" stroke="#1d3557" stroke-width="3"></path> </g> <path d="M 180 120 Q 220 120 280 145" fill="none" stroke="#9c6644" stroke-width="18" stroke-linecap="round"></path> <path d="M 270 140 L 295 140 L 300 155 L 275 160 Z" fill="#e76f51"></path> </svg>
Upload
Copy
Download
Share
Preview
React
React Native
PNG
Data URI
100%
Download
SVG
Viewer
Edit
Export
Rotate
Flip Y
Flip X
-1px x -1px
Change dimensions
Trim Padding
Optimize
4.37 KB
2.86 KB
-34%
Prettify
Preferences
Clear
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="100%" height="100%"> <defs> <g id="spokes-small"> <line x1="0" y1="-22" x2="0" y2="22" stroke="#a8dadc" stroke-width="3"></line> <line x1="-22" y1="0" x2="22" y2="0" stroke="#a8dadc" stroke-width="3"></line> <line x1="-15" y1="-15" x2="15" y2="15" stroke="#a8dadc" stroke-width="3"></line> <line x1="-15" y1="15" x2="15" y2="-15" stroke="#a8dadc" stroke-width="3"></line> </g> <g id="spokes-large"> <line x1="0" y1="-38" x2="0" y2="38" stroke="#a8dadc" stroke-width="3"></line> <line x1="-38" y1="0" x2="38" y2="0" stroke="#a8dadc" stroke-width="3"></line> <line x1="-27" y1="-27" x2="27" y2="27" stroke="#a8dadc" stroke-width="3"></line> <line x1="-27" y1="27" x2="27" y2="-27" stroke="#a8dadc" stroke-width="3"></line> </g> </defs> <circle cx="200" cy="200" r="190" fill="#f0f8ff"></circle> <ellipse cx="190" cy="335" rx="140" ry="12" fill="rgba(0,0,0,0.1)"></ellipse> <path d="M 40 280 L 70 280 M 20 250 L 50 250 M 50 310 L 80 310" stroke="#ccc" stroke-width="4" stroke-linecap="round"></path> <g transform="translate(130, 275)"> <circle cx="0" cy="0" r="30" fill="#333"></circle> <circle cx="0" cy="0" r="22" fill="#f1faee"></circle> <use href="#spokes-small"></use> <circle cx="0" cy="0" r="6" fill="#e63946"></circle> </g> <g transform="translate(85, 185) rotate(-10)"> <ellipse cx="0" cy="0" rx="55" ry="22" fill="#7f4f24"></ellipse> <path d="M -30 -15 L -20 15 M -10 -20 L 0 20 M 10 -20 L 20 20 M 30 -15 L 40 15 M -40 -5 L 45 5 M -35 5 L 40 15" stroke="#5c3a21" stroke-width="2" stroke-linecap="round"></path> </g> <path d="M 90 300 L 150 200 L 260 220" fill="none" stroke="#e63946" stroke-width="14" stroke-linejoin="round"></path> <path d="M 280 300 L 240 140" fill="none" stroke="#e63946" stroke-width="12" stroke-linecap="round"></path> <rect x="120" y="185" width="50" height="15" rx="7" fill="#1d3557"></rect> <path d="M 240 140 L 230 125" stroke="#a8dadc" stroke-width="8" stroke-linecap="round"></path> <path d="M 240 140 Q 270 120 285 150" fill="none" stroke="#a8dadc" stroke-width="8" stroke-linecap="round"></path> <path d="M 278 140 L 292 155" stroke="#1d3557" stroke-width="14" stroke-linecap="round"></path> <path d="M 160 190 Q 180 240 230 250" fill="none" stroke="#7f4f24" stroke-width="20" stroke-linecap="round"></path> <ellipse cx="165" cy="150" rx="45" ry="65" fill="#9c6644" transform="rotate(15 165 150)"></ellipse> <ellipse cx="180" cy="155" rx="25" ry="55" fill="#b07d5b" transform="rotate(15 180 155)"></ellipse> <path d="M 160 190 Q 200 260 250 270" fill="none" stroke="#9c6644" stroke-width="22" stroke-linecap="round"></path> <g transform="translate(90, 300)"> <circle cx="0" cy="0" r="35" fill="#333"></circle> <circle cx="0" cy="0" r="26" fill="#f1faee"></circle> <use href="#spokes-small" transform="scale(1.18)"></use> <circle cx="0" cy="0" r="8" fill="#e63946"></circle> </g> <g transform="translate(280, 300)"> <circle cx="0" cy="0" r="50" fill="#333"></circle> <circle cx="0" cy="0" r="40" fill="#f1faee"></circle> <use href="#spokes-large"></use> <circle cx="0" cy="0" r="10" fill="#e63946"></circle> </g> <line x1="280" y1="300" x2="255" y2="270" stroke="#a8dadc" stroke-width="8" stroke-linecap="round"></line> <path d="M 235 260 L 270 255 L 280 275 L 245 280 Z" fill="#e76f51"></path> <rect x="240" y="265" width="30" height="12" rx="4" fill="#1d3557" transform="rotate(-15 255 270)"></rect> <circle cx="190" cy="85" r="36" fill="#9c6644"></circle> <path d="M 215 75 C 250 65, 285 75, 280 100 C 275 115, 230 110, 215 105 Z" fill="#e76f51"></path> <circle cx="205" cy="75" r="5" fill="#111"></circle> <circle cx="207" cy="73" r="1.5" fill="#fff"></circle> <g transform="translate(0, -5)"> <path d="M 155 85 Q 185 30 225 85 Z" fill="#457b9d"></path> <path d="M 185 50 Q 195 40 205 85 L 175 85 Z" fill="#e9c46a"></path> <path d="M 145 85 L 235 85" stroke="#1d3557" stroke-width="6" stroke-linecap="round"></path> <path d="M 190 85 Q 185 125 210 110" fill="none" stroke="#1d3557" stroke-width="3"></path> </g> <path d="M 180 120 Q 220 120 280 145" fill="none" stroke="#9c6644" stroke-width="18" stroke-linecap="round"></path> <path d="M 270 140 L 295 140 L 300 155 L 275 160 Z" fill="#e76f51"></path> </svg>
Upload
Copy
Download
Share
Preview
React
React Native
PNG
Data URI
100%
Download