10 Jul 2025
<!DOCTYPE html> <html> <head> <title>Xbox 360 Controller SVG</title> <style> body { background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } svg { width: 80%; max-width: 500px; height: auto; filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.2)); } </style> </head> <body> <svg xmlns="w3.org/2000/svg" viewBox="0 0 400 260"> <defs> <!-- Gradient for the main body to give slight depth --> <linearGradient id="bodyGrad" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:1" /> <stop offset="100%" style="stop-color:#E0E0E0;stop-opacity:1" /> </linearGradient> <!-- Gradient for the chrome Guide button --> <radialGradient id="guideGrad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:1" /> <stop offset="40%" style="stop-color:#D0D0D0;stop-opacity:1" /> <stop offset="100%" style="stop-color:#909090;stop-opacity:1" /> </radialGradient> <!-- Gradient for Analog stick tops --> <radialGradient id="stickTopGrad" cx="50%" cy="50%" r="50%" fx="50%" fy="30%"> <stop offset="0%" style="stop-color:#999999;stop-opacity:1" /> <stop offset="100%" style="stop-color:#777777;stop-opacity:1" /> </radialGradient> </defs> <!-- Triggers (Slightly visible from top) --> <path d="M 65 25 Q 80 5, 110 5 Q 125 5, 130 25 Z" fill="#ccc"/> <path d="M 270 25 Q 275 5, 290 5 Q 320 5, 335 25 Z" fill="#ccc"/> <!-- Main Body Shape (Handles and Core) --> <path d="M 50 40 C 5 120, 40 240, 130 210 L 180 200 L 220 200 C 360 240, 395 120, 350 40 Q 300 15, 200 30 Q 100 15, 50 40 Z" fill="url(#bodyGrad)" stroke="#ccc" stroke-width="2"/> <!-- Bumpers (LB and RB) --> <rect x="60" y="28" width="80" height="15" rx="5" fill="#f9f9f9" stroke="#bbb" stroke-width="1"/> <rect x="260" y="28" width="80" height="15" rx="5" fill="#f9f9f9" stroke="#bbb" stroke-width="1"/> <!-- Battery Pack Area (Indentation) --> <rect x="160" y="30" width="80" height="10" rx="3" fill="#ddd"/> <!-- Left Analog Stick --> <circle cx="85" cy="90" r="25" fill="#555" /> <circle cx="85" cy="90" r="22" fill="url(#stickTopGrad)" /> <!-- D-Pad --> <g transform="translate(150, 155)"> <circle cx="0" cy="0" r="28" fill="#666"/> <!-- Cross shape --> <path d="M-18 -5 L -18 5 L -5 5 L -5 18 L 5 18 L 5 5 L 18 5 L 18 -5 L 5 -5 L 5 -18 L -5 -18 L -5 -5 Z" fill="#888"/> </g> <!-- Right Analog Stick --> <circle cx="250" cy="155" r="25" fill="#555" /> <circle cx="250" cy="155" r="22" fill="url(#stickTopGrad)" /> <!-- ABXY Buttons Group --> <g transform="translate(305, 90)" font-family="Arial, sans-serif" font-weight="bold" font-size="14" text-anchor="middle" dominant-baseline="middle" fill="#333"> <!-- A Button (Green) --> <circle cx="0" cy="25" r="15" fill="#4CAF50" stroke="#388E3C" stroke-width="1"/> <text x="0" y="26">A</text> <!-- B Button (Red) --> <circle cx="25" cy="0" r="15" fill="#F44336" stroke="#D32F2F" stroke-width="1"/> <text x="25" y="1">B</text> <!-- X Button (Blue) --> <circle cx="-25" cy="0" r="15" fill="#2196F3" stroke="#1976D2" stroke-width="1"/> <text x="-25" y="1">X</text> <!-- Y Button (Yellow) --> <circle cx="0" cy="-25" r="15" fill="#FFC107" stroke="#FFA000" stroke-width="1"/> <text x="0" y="-24">Y</text> </g> <!-- Guide Button (The Nexus) --> <circle cx="200" cy="95" r="20" fill="url(#guideGrad)" stroke="#aaa" stroke-width="1"/> <!-- The Green X --> <path d="M 192 85 L 200 90 L 208 85 L 200 100 L 208 105 L 200 110 L 192 105 L 200 100 Z" fill="#4CAF50" stroke="#388E3C" stroke-width="0.5"/> <!-- Start and Back Buttons --> <!-- Back --> <ellipse cx="165" cy="95" rx="8" ry="6" fill="#ccc" stroke="#999" stroke-width="1"/> <!-- Start --> <ellipse cx="235" cy="95" rx="8" ry="6" fill="#ccc" stroke="#999" stroke-width="1"/> </svg> </body> </html>
3
343