SVG
Viewer
CxLSTx2X
N/A
Send feedback
Terms & Conditions
Privacy Policy
Rotate
Flip Y
Flip X
-1px x -1px
Change dimensions
Optimize
3.67 KB
2.48 KB
-32%
Prettify
Preferences
Clear
<svg width="500" height="350" viewBox="0 0 500 350" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="bodyGrad" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#383838;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#1a1a1a;stop-opacity:1"></stop> </linearGradient> <radialGradient id="stickGrad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:#444;stop-opacity:1"></stop> <stop offset="80%" style="stop-color:#111;stop-opacity:1"></stop> </radialGradient> <linearGradient id="btnGrad" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#222;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#000;stop-opacity:1"></stop> </linearGradient> </defs> <path d="M 140,60 C 100,60 60,80 50,130 C 45,180 55,260 80,290 C 100,315 130,310 140,280 C 150,250 160,230 190,230 L 310,230 C 340,230 350,250 360,280 C 370,310 400,315 420,290 C 445,260 455,180 450,130 C 440,80 400,60 360,60 Q 250,50 140,60 Z" fill="url(#bodyGrad)" stroke="#111" stroke-width="2"></path> <rect x="175" y="60" width="150" height="90" rx="5" ry="5" fill="#222" stroke="#111" stroke-width="2"></rect> <g fill="#111"> <circle cx="250" cy="110" r="1.5"></circle> <circle cx="245" cy="105" r="1.5"></circle> <circle cx="255" cy="105" r="1.5"></circle> <circle cx="240" cy="100" r="1.5"></circle> <circle cx="260" cy="100" r="1.5"></circle> </g> <circle cx="170" cy="220" r="35" fill="url(#stickGrad)" stroke="#000" stroke-width="2"></circle> <circle cx="170" cy="220" r="25" fill="none" stroke="#222" stroke-width="2"></circle> <circle cx="330" cy="220" r="35" fill="url(#stickGrad)" stroke="#000" stroke-width="2"></circle> <circle cx="330" cy="220" r="25" fill="none" stroke="#222" stroke-width="2"></circle> <g transform="translate(100, 130)"> <path d="M -15,-45 L 15,-45 L 15,-15 L 45,-15 L 45,15 L 15,15 L 15,45 L -15,45 L -15,15 L -45,15 L -45,-15 L -15,-15 Z" fill="#222" stroke="#000" stroke-width="1"></path> <path d="M 0,-38 L 5,-30 L -5,-30 Z" fill="#555"></path> <path d="M 0,38 L -5,30 L 5,30 Z" fill="#555"></path> <path d="M -38,0 L -30,-5 L -30,5 Z" fill="#555"></path> <path d="M 38,0 L 30,5 L 30,-5 Z" fill="#555"></path> </g> <g transform="translate(400, 130)"> <circle cx="0" cy="-35" r="18" fill="url(#btnGrad)"></circle> <circle cx="35" cy="0" r="18" fill="url(#btnGrad)"></circle> <circle cx="0" cy="35" r="18" fill="url(#btnGrad)"></circle> <circle cx="-35" cy="0" r="18" fill="url(#btnGrad)"></circle> <path d="M 0,-45 L 8,-30 L -8,-30 Z" fill="none" stroke="#2cd668" stroke-width="3"></path> <circle cx="35" cy="0" r="8" fill="none" stroke="#ff3e3e" stroke-width="3"></circle> <path d="M -6,29 L 6,41 M 6,29 L -6,41" stroke="#3d7eff" stroke-width="3"></path> <rect x="-43" y="-8" width="16" height="16" fill="none" stroke="#d44ebc" stroke-width="3"></rect> </g> <circle cx="250" cy="225" r="18" fill="#111" stroke="#000" stroke-width="1"></circle> <path d="M 246,220 C 255,220 255,228 246,228 L 246,232 M 248,228 L 254,228 S 255,232 250,232" stroke="#fff" stroke-width="1.5" fill="none"></path> <rect x="130" y="70" width="20" height="35" rx="10" fill="#222"></rect> <rect x="350" y="70" width="20" height="35" rx="10" fill="#222"></rect> <path d="M 80,60 Q 60,65 55,80" fill="none" stroke="#111" stroke-width="4"></path> <path d="M 420,60 Q 440,65 445,80" fill="none" stroke="#111" stroke-width="4"></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
Optimize
3.67 KB
2.48 KB
-32%
Prettify
Preferences
Clear
<svg width="500" height="350" viewBox="0 0 500 350" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="bodyGrad" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#383838;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#1a1a1a;stop-opacity:1"></stop> </linearGradient> <radialGradient id="stickGrad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:#444;stop-opacity:1"></stop> <stop offset="80%" style="stop-color:#111;stop-opacity:1"></stop> </radialGradient> <linearGradient id="btnGrad" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#222;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#000;stop-opacity:1"></stop> </linearGradient> </defs> <path d="M 140,60 C 100,60 60,80 50,130 C 45,180 55,260 80,290 C 100,315 130,310 140,280 C 150,250 160,230 190,230 L 310,230 C 340,230 350,250 360,280 C 370,310 400,315 420,290 C 445,260 455,180 450,130 C 440,80 400,60 360,60 Q 250,50 140,60 Z" fill="url(#bodyGrad)" stroke="#111" stroke-width="2"></path> <rect x="175" y="60" width="150" height="90" rx="5" ry="5" fill="#222" stroke="#111" stroke-width="2"></rect> <g fill="#111"> <circle cx="250" cy="110" r="1.5"></circle> <circle cx="245" cy="105" r="1.5"></circle> <circle cx="255" cy="105" r="1.5"></circle> <circle cx="240" cy="100" r="1.5"></circle> <circle cx="260" cy="100" r="1.5"></circle> </g> <circle cx="170" cy="220" r="35" fill="url(#stickGrad)" stroke="#000" stroke-width="2"></circle> <circle cx="170" cy="220" r="25" fill="none" stroke="#222" stroke-width="2"></circle> <circle cx="330" cy="220" r="35" fill="url(#stickGrad)" stroke="#000" stroke-width="2"></circle> <circle cx="330" cy="220" r="25" fill="none" stroke="#222" stroke-width="2"></circle> <g transform="translate(100, 130)"> <path d="M -15,-45 L 15,-45 L 15,-15 L 45,-15 L 45,15 L 15,15 L 15,45 L -15,45 L -15,15 L -45,15 L -45,-15 L -15,-15 Z" fill="#222" stroke="#000" stroke-width="1"></path> <path d="M 0,-38 L 5,-30 L -5,-30 Z" fill="#555"></path> <path d="M 0,38 L -5,30 L 5,30 Z" fill="#555"></path> <path d="M -38,0 L -30,-5 L -30,5 Z" fill="#555"></path> <path d="M 38,0 L 30,5 L 30,-5 Z" fill="#555"></path> </g> <g transform="translate(400, 130)"> <circle cx="0" cy="-35" r="18" fill="url(#btnGrad)"></circle> <circle cx="35" cy="0" r="18" fill="url(#btnGrad)"></circle> <circle cx="0" cy="35" r="18" fill="url(#btnGrad)"></circle> <circle cx="-35" cy="0" r="18" fill="url(#btnGrad)"></circle> <path d="M 0,-45 L 8,-30 L -8,-30 Z" fill="none" stroke="#2cd668" stroke-width="3"></path> <circle cx="35" cy="0" r="8" fill="none" stroke="#ff3e3e" stroke-width="3"></circle> <path d="M -6,29 L 6,41 M 6,29 L -6,41" stroke="#3d7eff" stroke-width="3"></path> <rect x="-43" y="-8" width="16" height="16" fill="none" stroke="#d44ebc" stroke-width="3"></rect> </g> <circle cx="250" cy="225" r="18" fill="#111" stroke="#000" stroke-width="1"></circle> <path d="M 246,220 C 255,220 255,228 246,228 L 246,232 M 248,228 L 254,228 S 255,232 250,232" stroke="#fff" stroke-width="1.5" fill="none"></path> <rect x="130" y="70" width="20" height="35" rx="10" fill="#222"></rect> <rect x="350" y="70" width="20" height="35" rx="10" fill="#222"></rect> <path d="M 80,60 Q 60,65 55,80" fill="none" stroke="#111" stroke-width="4"></path> <path d="M 420,60 Q 440,65 445,80" fill="none" stroke="#111" stroke-width="4"></path> </svg>
Upload
Copy
Download
Share
Preview
React
React Native
PNG
Data URI
100%
Download