SVG
Viewer
CHQX3mNO
N/A
Send feedback
Terms & Conditions
Privacy Policy
Rotate
Flip Y
Flip X
-1px x -1px
Change dimensions
Trim Padding
Optimize
12.3 KB
7.69 KB
-38%
Prettify
Preferences
Clear
<svg width="100%" height="100%" viewBox="0 0 900 650" 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="30%" style="stop-color:#242424;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#121212;stop-opacity:1"></stop> </linearGradient> <radialGradient id="stickGrad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="40%" style="stop-color:#1f1f1f;stop-opacity:1"></stop> <stop offset="90%" style="stop-color:#0a0a0a;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#2e2e2e;stop-opacity:1"></stop> </radialGradient> <radialGradient id="blackButtonGrad" cx="30%" cy="30%" r="70%"> <stop offset="0%" style="stop-color:#555555;stop-opacity:1"></stop> <stop offset="20%" style="stop-color:#222222;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#000000;stop-opacity:1"></stop> </radialGradient> <linearGradient id="matteButtonGrad" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#2a2a2a;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#111111;stop-opacity:1"></stop> </linearGradient> <radialGradient id="orbGrad" cx="35%" cy="35%" r="65%"> <stop offset="0%" style="stop-color:#777;stop-opacity:1"></stop> <stop offset="20%" style="stop-color:#222;stop-opacity:1"></stop> <stop offset="85%" style="stop-color:#050505;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#000;stop-opacity:1"></stop> </radialGradient> <radialGradient id="logoXGlow" cx="50%" cy="50%" r="50%"> <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1"></stop> <stop offset="80%" style="stop-color:#dddddd;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#cccccc;stop-opacity:1"></stop> </radialGradient> <radialGradient id="socketGrad" cx="50%" cy="50%" r="50%"> <stop offset="80%" style="stop-color:#000000;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#1a1a1a;stop-opacity:1"></stop> </radialGradient> <linearGradient id="glare" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#ffffff;stop-opacity:0.4"></stop> <stop offset="100%" style="stop-color:#ffffff;stop-opacity:0"></stop> </linearGradient> <linearGradient id="crossSurf" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" style="stop-color:#303030;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#0a0a0a;stop-opacity:1"></stop> </linearGradient> <radialGradient id="slopeGrad" cx="0%" cy="0%" r="90%"> <stop offset="0%" style="stop-color:#000000;stop-opacity:1"></stop> <stop offset="60%" style="stop-color:#0f0f0f;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#1a1a1a;stop-opacity:1"></stop> </radialGradient> <radialGradient id="centerDip" cx="50%" cy="50%" r="50%"> <stop offset="0%" style="stop-color:#111;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#222;stop-opacity:1"></stop> </radialGradient> <filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%"> <feGaussianBlur in="SourceAlpha" stdDeviation="12"></feGaussianBlur> <feOffset dx="0" dy="15" result="offsetblur"></feOffset> <feComponentTransfer> <feFuncA type="linear" slope="0.5"></feFuncA> </feComponentTransfer> <feMerge> <feMergeNode></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> <filter id="glow"> <feGaussianBlur stdDeviation="4" result="coloredBlur"></feGaussianBlur> <feMerge> <feMergeNode in="coloredBlur"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> <filter id="whiteBloom" height="200%"> <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur"></feGaussianBlur> <feMerge> <feMergeNode in="blur"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> <filter id="armStep"> <fedropshadow dx="0" dy="1" stdDeviation="1.2" flood-color="#000" flood-opacity="1.0"></fedropshadow> </filter> <filter id="housingGap"> <feOffset dx="0" dy="1"></feOffset> <feGaussianBlur stdDeviation="1.5"></feGaussianBlur> <feComposite operator="out" in="SourceGraphic" result="inverse"></feComposite> <feFlood flood-color="black" flood-opacity="1"></feFlood> <feComposite operator="in" in2="inverse" result="shadow"></feComposite> <feComposite operator="over" in="shadow" in2="SourceGraphic"></feComposite> </filter> <filter id="btnSocketFilter"> <feGaussianBlur stdDeviation="0.8" in="SourceAlpha"></feGaussianBlur> <feOffset dx="0" dy="1" result="blur"></feOffset> <feFlood flood-color="#000" flood-opacity="1"></feFlood> <feComposite in2="blur" operator="in"></feComposite> <feMerge> <feMergeNode></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> <filter id="textInset"> <fedropshadow dx="0" dy="1" stdDeviation="0.5" flood-color="#000" flood-opacity="0.9"></fedropshadow> </filter> <filter id="slopeBlur"> <feGaussianBlur stdDeviation="2.0"></feGaussianBlur> </filter> <filter id="centerBlur"> <feGaussianBlur stdDeviation="1.5"></feGaussianBlur> </filter> </defs> <rect width="900" height="650" fill="#e6e6e6"></rect> <g transform="translate(0, 10)" filter="url(#softShadow)"> <path d="M200,170 Q 215,138 280,138 C 310,138 320,155 340,155 L 340,160 Q 260,160 200,170 Z" fill="#111" stroke="#050505" stroke-width="1"></path> <path d="M700,170 Q 685,138 620,138 C 590,138 580,155 560,155 L 560,160 Q 640,160 700,170 Z" fill="#111" stroke="#050505" stroke-width="1"></path> <path d="M 200,170 C 230,155 340,155 340,155 L 560,155 C 560,155 670,155 700,170 C 725,210 775,320 775,480 C 775,560 710,610 660,570 C 630,540 580,460 450,460 C 320,460 270,540 240,570 C 190,610 125,560 125,480 C 125,320 175,210 200,170 Z" fill="url(#bodyGrad)"></path> <path d="M280,155 C330,150 570,150 620,155 C640,165 650,200 640,300 C570,320 330,320 260,300 C250,200 260,165 280,155 Z" fill="#252525" opacity="0.2"></path> <g transform="translate(290, 260)"> <circle cx="0" cy="0" r="50" fill="#181818" filter="url(#softShadow)"></circle> <circle cx="0" cy="0" r="42" fill="url(#stickGrad)" stroke="#000" stroke-width="2"></circle> <circle cx="0" cy="0" r="34" fill="none" stroke="#222" stroke-width="1.5" opacity="0.6"></circle> </g> <g transform="translate(615, 260)"> <g transform="translate(0, -42)"> <circle cx="0" cy="0" r="23.5" fill="url(#socketGrad)" filter="url(#btnSocketFilter)"></circle> <circle cx="0" cy="0" r="20" fill="url(#blackButtonGrad)" stroke="#000" stroke-width="0.5"></circle> <text x="0" y="7" font-family="Arial" font-weight="bold" font-size="21" text-anchor="middle" fill="#fecb00" filter="url(#textInset)">Y</text> <circle cx="0" cy="-6" r="10" fill="url(#glare)"></circle> </g> <g transform="translate(42, 0)"> <circle cx="0" cy="0" r="23.5" fill="url(#socketGrad)" filter="url(#btnSocketFilter)"></circle> <circle cx="0" cy="0" r="20" fill="url(#blackButtonGrad)" stroke="#000" stroke-width="0.5"></circle> <text x="0" y="7" font-family="Arial" font-weight="bold" font-size="21" text-anchor="middle" fill="#e62e2e" filter="url(#textInset)">B</text> <circle cx="0" cy="-6" r="10" fill="url(#glare)"></circle> </g> <g transform="translate(0, 42)"> <circle cx="0" cy="0" r="23.5" fill="url(#socketGrad)" filter="url(#btnSocketFilter)"></circle> <circle cx="0" cy="0" r="20" fill="url(#blackButtonGrad)" stroke="#000" stroke-width="0.5"></circle> <text x="0" y="7" font-family="Arial" font-weight="bold" font-size="21" text-anchor="middle" fill="#59c22b" filter="url(#textInset)">A</text> <circle cx="0" cy="-6" r="10" fill="url(#glare)"></circle> </g> <g transform="translate(-42, 0)"> <circle cx="0" cy="0" r="23.5" fill="url(#socketGrad)" filter="url(#btnSocketFilter)"></circle> <circle cx="0" cy="0" r="20" fill="url(#blackButtonGrad)" stroke="#000" stroke-width="0.5"></circle> <text x="0" y="7" font-family="Arial" font-weight="bold" font-size="21" text-anchor="middle" fill="#00bfff" filter="url(#textInset)">X</text> <circle cx="0" cy="-6" r="10" fill="url(#glare)"></circle> </g> </g> <g transform="translate(540, 380)"> <circle cx="0" cy="0" r="50" fill="#181818" filter="url(#softShadow)"></circle> <circle cx="0" cy="0" r="42" fill="url(#stickGrad)" stroke="#000" stroke-width="2"></circle> <circle cx="0" cy="0" r="34" fill="none" stroke="#222" stroke-width="1.5" opacity="0.6"></circle> </g> <g transform="translate(340, 380)"> <circle cx="0" cy="0" r="55" fill="#050505" filter="url(#housingGap)"></circle> <g filter="url(#slopeBlur)"> <path d="M0,0 L50,-20 A 52 52 0 0 1 50,20 Z" fill="url(#slopeGrad)" transform="rotate(45)"></path> <path d="M0,0 L50,-20 A 52 52 0 0 1 50,20 Z" fill="url(#slopeGrad)" transform="rotate(135)"></path> <path d="M0,0 L50,-20 A 52 52 0 0 1 50,20 Z" fill="url(#slopeGrad)" transform="rotate(225)"></path> <path d="M0,0 L50,-20 A 52 52 0 0 1 50,20 Z" fill="url(#slopeGrad)" transform="rotate(315)"></path> </g> <g filter="url(#armStep)"> <path d="M-17,-17 L-17,-50 Q0,-52 17,-50 L17,-17 L50,-17 Q52,0 50,17 L17,17 L17,50 Q0,52 -17,50 L-17,17 L-50,17 Q-52,0 -50,-17 L-17,-17 Z" fill="url(#crossSurf)" stroke="#2a2a2a" stroke-width="0.5"></path> </g> <rect x="-14" y="-14" width="28" height="28" rx="8" fill="url(#centerDip)" filter="url(#centerBlur)" opacity="0.9"></rect> </g> <g transform="translate(450, 200)"> <circle cx="0" cy="0" r="30" fill="#1a1a1a" opacity="0.6" filter="url(#housingGap)"></circle> <circle cx="0" cy="0" r="28" fill="url(#orbGrad)" stroke="#000" stroke-width="0.5"></circle> <path d="M-16,-19 Q0,-6 16,-19 L20,-15 Q7,0 20,15 L16,19 Q0,6 -16,19 L-20,15 Q-7,0 -20,-15 Z" fill="url(#logoXGlow)" filter="url(#whiteBloom)" transform="scale(0.9)"></path> <path d="M -20,-5 Q 0,-22 20,-5 Q 0,-8 -20,-5" fill="#fff" opacity="0.15"></path> </g> <g transform="translate(400, 260)"> <circle cx="0" cy="0" r="14" fill="#000" filter="url(#btnSocketFilter)"></circle> <circle cx="0" cy="0" r="13" fill="url(#matteButtonGrad)" stroke="#050505"></circle> <rect x="-5" y="-5" width="7" height="7" stroke="#888" stroke-width="1.5" fill="none"></rect> <rect x="-2" y="-2" width="7" height="7" stroke="#888" stroke-width="1.5" fill="none"></rect> </g> <g transform="translate(500, 260)"> <circle cx="0" cy="0" r="14" fill="#000" filter="url(#btnSocketFilter)"></circle> <circle cx="0" cy="0" r="13" fill="url(#matteButtonGrad)" stroke="#050505"></circle> <line x1="-7" y1="-4" x2="7" y2="-4" stroke="#888" stroke-width="1.5"></line> <line x1="-7" y1="0" x2="7" y2="0" stroke="#888" stroke-width="1.5"></line> <line x1="-7" y1="4" x2="7" y2="4" stroke="#888" stroke-width="1.5"></line> </g> <g transform="translate(450, 315)"> <rect x="-21" y="-12" width="42" height="24" rx="12" fill="#000" filter="url(#btnSocketFilter)"></rect> <rect x="-20" y="-11" width="40" height="22" rx="11" fill="url(#matteButtonGrad)" stroke="#050505" stroke-width="0.5"></rect> <g transform="translate(0, 0) scale(0.85)"> <path d="M-7,-3 L-7,5 L7,5 L7,-3" stroke="#888" stroke-width="1.8" fill="none" stroke-linecap="round"></path> <path d="M0,-7 L0,2" stroke="#888" stroke-width="1.8" fill="none" stroke-linecap="round"></path> <path d="M-3,-4 L0,-7 L3,-4" stroke="#888" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> </g> </g> </g> </svg>
Upload
Copy
Download
Share
Y
B
A
X
Preview
React
React Native
PNG
Data URI
Y
B
A
X
100%
Download
SVG
Viewer
Edit
Export
Rotate
Flip Y
Flip X
-1px x -1px
Change dimensions
Trim Padding
Optimize
12.3 KB
7.69 KB
-38%
Prettify
Preferences
Clear
<svg width="100%" height="100%" viewBox="0 0 900 650" 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="30%" style="stop-color:#242424;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#121212;stop-opacity:1"></stop> </linearGradient> <radialGradient id="stickGrad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="40%" style="stop-color:#1f1f1f;stop-opacity:1"></stop> <stop offset="90%" style="stop-color:#0a0a0a;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#2e2e2e;stop-opacity:1"></stop> </radialGradient> <radialGradient id="blackButtonGrad" cx="30%" cy="30%" r="70%"> <stop offset="0%" style="stop-color:#555555;stop-opacity:1"></stop> <stop offset="20%" style="stop-color:#222222;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#000000;stop-opacity:1"></stop> </radialGradient> <linearGradient id="matteButtonGrad" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#2a2a2a;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#111111;stop-opacity:1"></stop> </linearGradient> <radialGradient id="orbGrad" cx="35%" cy="35%" r="65%"> <stop offset="0%" style="stop-color:#777;stop-opacity:1"></stop> <stop offset="20%" style="stop-color:#222;stop-opacity:1"></stop> <stop offset="85%" style="stop-color:#050505;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#000;stop-opacity:1"></stop> </radialGradient> <radialGradient id="logoXGlow" cx="50%" cy="50%" r="50%"> <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1"></stop> <stop offset="80%" style="stop-color:#dddddd;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#cccccc;stop-opacity:1"></stop> </radialGradient> <radialGradient id="socketGrad" cx="50%" cy="50%" r="50%"> <stop offset="80%" style="stop-color:#000000;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#1a1a1a;stop-opacity:1"></stop> </radialGradient> <linearGradient id="glare" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#ffffff;stop-opacity:0.4"></stop> <stop offset="100%" style="stop-color:#ffffff;stop-opacity:0"></stop> </linearGradient> <linearGradient id="crossSurf" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" style="stop-color:#303030;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#0a0a0a;stop-opacity:1"></stop> </linearGradient> <radialGradient id="slopeGrad" cx="0%" cy="0%" r="90%"> <stop offset="0%" style="stop-color:#000000;stop-opacity:1"></stop> <stop offset="60%" style="stop-color:#0f0f0f;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#1a1a1a;stop-opacity:1"></stop> </radialGradient> <radialGradient id="centerDip" cx="50%" cy="50%" r="50%"> <stop offset="0%" style="stop-color:#111;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#222;stop-opacity:1"></stop> </radialGradient> <filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%"> <feGaussianBlur in="SourceAlpha" stdDeviation="12"></feGaussianBlur> <feOffset dx="0" dy="15" result="offsetblur"></feOffset> <feComponentTransfer> <feFuncA type="linear" slope="0.5"></feFuncA> </feComponentTransfer> <feMerge> <feMergeNode></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> <filter id="glow"> <feGaussianBlur stdDeviation="4" result="coloredBlur"></feGaussianBlur> <feMerge> <feMergeNode in="coloredBlur"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> <filter id="whiteBloom" height="200%"> <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur"></feGaussianBlur> <feMerge> <feMergeNode in="blur"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> <filter id="armStep"> <fedropshadow dx="0" dy="1" stdDeviation="1.2" flood-color="#000" flood-opacity="1.0"></fedropshadow> </filter> <filter id="housingGap"> <feOffset dx="0" dy="1"></feOffset> <feGaussianBlur stdDeviation="1.5"></feGaussianBlur> <feComposite operator="out" in="SourceGraphic" result="inverse"></feComposite> <feFlood flood-color="black" flood-opacity="1"></feFlood> <feComposite operator="in" in2="inverse" result="shadow"></feComposite> <feComposite operator="over" in="shadow" in2="SourceGraphic"></feComposite> </filter> <filter id="btnSocketFilter"> <feGaussianBlur stdDeviation="0.8" in="SourceAlpha"></feGaussianBlur> <feOffset dx="0" dy="1" result="blur"></feOffset> <feFlood flood-color="#000" flood-opacity="1"></feFlood> <feComposite in2="blur" operator="in"></feComposite> <feMerge> <feMergeNode></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> <filter id="textInset"> <fedropshadow dx="0" dy="1" stdDeviation="0.5" flood-color="#000" flood-opacity="0.9"></fedropshadow> </filter> <filter id="slopeBlur"> <feGaussianBlur stdDeviation="2.0"></feGaussianBlur> </filter> <filter id="centerBlur"> <feGaussianBlur stdDeviation="1.5"></feGaussianBlur> </filter> </defs> <rect width="900" height="650" fill="#e6e6e6"></rect> <g transform="translate(0, 10)" filter="url(#softShadow)"> <path d="M200,170 Q 215,138 280,138 C 310,138 320,155 340,155 L 340,160 Q 260,160 200,170 Z" fill="#111" stroke="#050505" stroke-width="1"></path> <path d="M700,170 Q 685,138 620,138 C 590,138 580,155 560,155 L 560,160 Q 640,160 700,170 Z" fill="#111" stroke="#050505" stroke-width="1"></path> <path d="M 200,170 C 230,155 340,155 340,155 L 560,155 C 560,155 670,155 700,170 C 725,210 775,320 775,480 C 775,560 710,610 660,570 C 630,540 580,460 450,460 C 320,460 270,540 240,570 C 190,610 125,560 125,480 C 125,320 175,210 200,170 Z" fill="url(#bodyGrad)"></path> <path d="M280,155 C330,150 570,150 620,155 C640,165 650,200 640,300 C570,320 330,320 260,300 C250,200 260,165 280,155 Z" fill="#252525" opacity="0.2"></path> <g transform="translate(290, 260)"> <circle cx="0" cy="0" r="50" fill="#181818" filter="url(#softShadow)"></circle> <circle cx="0" cy="0" r="42" fill="url(#stickGrad)" stroke="#000" stroke-width="2"></circle> <circle cx="0" cy="0" r="34" fill="none" stroke="#222" stroke-width="1.5" opacity="0.6"></circle> </g> <g transform="translate(615, 260)"> <g transform="translate(0, -42)"> <circle cx="0" cy="0" r="23.5" fill="url(#socketGrad)" filter="url(#btnSocketFilter)"></circle> <circle cx="0" cy="0" r="20" fill="url(#blackButtonGrad)" stroke="#000" stroke-width="0.5"></circle> <text x="0" y="7" font-family="Arial" font-weight="bold" font-size="21" text-anchor="middle" fill="#fecb00" filter="url(#textInset)">Y</text> <circle cx="0" cy="-6" r="10" fill="url(#glare)"></circle> </g> <g transform="translate(42, 0)"> <circle cx="0" cy="0" r="23.5" fill="url(#socketGrad)" filter="url(#btnSocketFilter)"></circle> <circle cx="0" cy="0" r="20" fill="url(#blackButtonGrad)" stroke="#000" stroke-width="0.5"></circle> <text x="0" y="7" font-family="Arial" font-weight="bold" font-size="21" text-anchor="middle" fill="#e62e2e" filter="url(#textInset)">B</text> <circle cx="0" cy="-6" r="10" fill="url(#glare)"></circle> </g> <g transform="translate(0, 42)"> <circle cx="0" cy="0" r="23.5" fill="url(#socketGrad)" filter="url(#btnSocketFilter)"></circle> <circle cx="0" cy="0" r="20" fill="url(#blackButtonGrad)" stroke="#000" stroke-width="0.5"></circle> <text x="0" y="7" font-family="Arial" font-weight="bold" font-size="21" text-anchor="middle" fill="#59c22b" filter="url(#textInset)">A</text> <circle cx="0" cy="-6" r="10" fill="url(#glare)"></circle> </g> <g transform="translate(-42, 0)"> <circle cx="0" cy="0" r="23.5" fill="url(#socketGrad)" filter="url(#btnSocketFilter)"></circle> <circle cx="0" cy="0" r="20" fill="url(#blackButtonGrad)" stroke="#000" stroke-width="0.5"></circle> <text x="0" y="7" font-family="Arial" font-weight="bold" font-size="21" text-anchor="middle" fill="#00bfff" filter="url(#textInset)">X</text> <circle cx="0" cy="-6" r="10" fill="url(#glare)"></circle> </g> </g> <g transform="translate(540, 380)"> <circle cx="0" cy="0" r="50" fill="#181818" filter="url(#softShadow)"></circle> <circle cx="0" cy="0" r="42" fill="url(#stickGrad)" stroke="#000" stroke-width="2"></circle> <circle cx="0" cy="0" r="34" fill="none" stroke="#222" stroke-width="1.5" opacity="0.6"></circle> </g> <g transform="translate(340, 380)"> <circle cx="0" cy="0" r="55" fill="#050505" filter="url(#housingGap)"></circle> <g filter="url(#slopeBlur)"> <path d="M0,0 L50,-20 A 52 52 0 0 1 50,20 Z" fill="url(#slopeGrad)" transform="rotate(45)"></path> <path d="M0,0 L50,-20 A 52 52 0 0 1 50,20 Z" fill="url(#slopeGrad)" transform="rotate(135)"></path> <path d="M0,0 L50,-20 A 52 52 0 0 1 50,20 Z" fill="url(#slopeGrad)" transform="rotate(225)"></path> <path d="M0,0 L50,-20 A 52 52 0 0 1 50,20 Z" fill="url(#slopeGrad)" transform="rotate(315)"></path> </g> <g filter="url(#armStep)"> <path d="M-17,-17 L-17,-50 Q0,-52 17,-50 L17,-17 L50,-17 Q52,0 50,17 L17,17 L17,50 Q0,52 -17,50 L-17,17 L-50,17 Q-52,0 -50,-17 L-17,-17 Z" fill="url(#crossSurf)" stroke="#2a2a2a" stroke-width="0.5"></path> </g> <rect x="-14" y="-14" width="28" height="28" rx="8" fill="url(#centerDip)" filter="url(#centerBlur)" opacity="0.9"></rect> </g> <g transform="translate(450, 200)"> <circle cx="0" cy="0" r="30" fill="#1a1a1a" opacity="0.6" filter="url(#housingGap)"></circle> <circle cx="0" cy="0" r="28" fill="url(#orbGrad)" stroke="#000" stroke-width="0.5"></circle> <path d="M-16,-19 Q0,-6 16,-19 L20,-15 Q7,0 20,15 L16,19 Q0,6 -16,19 L-20,15 Q-7,0 -20,-15 Z" fill="url(#logoXGlow)" filter="url(#whiteBloom)" transform="scale(0.9)"></path> <path d="M -20,-5 Q 0,-22 20,-5 Q 0,-8 -20,-5" fill="#fff" opacity="0.15"></path> </g> <g transform="translate(400, 260)"> <circle cx="0" cy="0" r="14" fill="#000" filter="url(#btnSocketFilter)"></circle> <circle cx="0" cy="0" r="13" fill="url(#matteButtonGrad)" stroke="#050505"></circle> <rect x="-5" y="-5" width="7" height="7" stroke="#888" stroke-width="1.5" fill="none"></rect> <rect x="-2" y="-2" width="7" height="7" stroke="#888" stroke-width="1.5" fill="none"></rect> </g> <g transform="translate(500, 260)"> <circle cx="0" cy="0" r="14" fill="#000" filter="url(#btnSocketFilter)"></circle> <circle cx="0" cy="0" r="13" fill="url(#matteButtonGrad)" stroke="#050505"></circle> <line x1="-7" y1="-4" x2="7" y2="-4" stroke="#888" stroke-width="1.5"></line> <line x1="-7" y1="0" x2="7" y2="0" stroke="#888" stroke-width="1.5"></line> <line x1="-7" y1="4" x2="7" y2="4" stroke="#888" stroke-width="1.5"></line> </g> <g transform="translate(450, 315)"> <rect x="-21" y="-12" width="42" height="24" rx="12" fill="#000" filter="url(#btnSocketFilter)"></rect> <rect x="-20" y="-11" width="40" height="22" rx="11" fill="url(#matteButtonGrad)" stroke="#050505" stroke-width="0.5"></rect> <g transform="translate(0, 0) scale(0.85)"> <path d="M-7,-3 L-7,5 L7,5 L7,-3" stroke="#888" stroke-width="1.8" fill="none" stroke-linecap="round"></path> <path d="M0,-7 L0,2" stroke="#888" stroke-width="1.8" fill="none" stroke-linecap="round"></path> <path d="M-3,-4 L0,-7 L3,-4" stroke="#888" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> </g> </g> </g> </svg>
Upload
Copy
Download
Share
Y
B
A
X
Preview
React
React Native
PNG
Data URI
Y
B
A
X
100%
Download