Free SVG Download, xbox controller. Free SVG and PNG Vector Icons.

CHQX3mNO

N/A

-1px x -1px

12.3 KB

7.69 KB-38%

<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

100%

SVGViewer

-1px x -1px

12.3 KB

7.69 KB-38%

<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

100%