SVG animado de Nintendo Switch

Aquí tienes el SVG solicitado, con la consola Nintendo Switch, la animación de los controles encajando y el encendido de la pantalla con el logo. ```svg <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500"> <defs> <style> @keyframes snapLeft { 0% { transform: translateX(-120px); } 60% { transform: translateX(10px); } 70% { transform: translateX(-5px); } 80% { transform: translateX(3px); } 90% { transform: translateX(-2px); } 100% { transform: translateX(0px); } } @keyframes snapRight { 0% { transform: translateX(120px); } 60% { transform: translateX(-10px); } 70% { transform: translateX(5px); } 80% { transform: translateX(-3px); } 90% { transform: translateX(2px); } 100% { transform: translateX(0px); } } @keyframes bootScreen { 0% { opacity: 0; } 30% { opacity: 0; } 50% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 1; } } @keyframes logoPop { 0% { opacity: 0; transform: scale(0.5); } 50% { opacity: 0; transform: scale(0.5); } 70% { opacity: 1; transform: scale(1.1); } 80% { transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } } @keyframes glow { 0% { opacity: 0.3; } 50% { opacity: 0.7; } 100% { opacity: 0.3; } } @keyframes screenFlash { 0% { opacity: 0; } 45% { opacity: 0; } 55% { opacity: 0.9; } 65% { opacity: 0.2; } 100% { opacity: 0; } } .left-controller { animation: snapLeft 1.5s ease-out forwards; } .right-controller { animation: snapRight 1.5s ease-out forwards; } .boot-content { animation: bootScreen 2.5s ease-in-out forwards; opacity: 0; } .logo { animation: logoPop 2.5s ease-out forwards; opacity: 0; } .screen-flash { animation: screenFlash 2.5s ease-in-out forwards; opacity: 0; } .joycon-glow { animation: glow 2s ease-in-out infinite; } </style> <!-- Glow filter --> <filter id="glowFilter"> <feGaussianBlur stdDeviation="3" result="blur"/> <feMerge> <feMergeNode in="blur"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> <!-- Shadow filter --> <filter id="shadow"> <feDropShadow dx="0" dy="4" stdDeviation="6" flood-color="#000" flood-opacity="0.3"/> </filter> <!-- Screen glow --> <filter id="screenGlow"> <feGaussianBlur stdDeviation="8" result="blur"/> <feMerge> <feMergeNode in="blur"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> </defs> <!-- Background --> <rect width="800" height="500" fill="#1a1a2e" rx="10"/> <!-- Subtle background pattern --> <circle cx="100" cy="80" r="60" fill="#16213e" opacity="0.5"/> <circle cx="700" cy="420" r="80" fill="#16213e" opacity="0.5"/> <circle cx="650" cy="100" r="40" fill="#16213e" opacity="0.3"/> <circle cx="150" cy="400" r="50" fill="#16213e" opacity="0.3"/> <!-- Console body (tablet) - centered --> <g filter="url(#shadow)"> <!-- Main tablet body --> <rect x="265" y="120" width="270" height="260" rx="12" fill="#2d2d2d" stroke="#3a3a3a" stroke-width="2"/> <!-- Screen bezel --> <rect x="275" y="130" width="250" height="240" rx="6" fill="#1a1a1a"/> <!-- Screen --> <rect x="285" y="140" width="230" height="220" rx="4" fill="#0a0a1a"/> <!-- Screen flash on boot --> <rect x="285" y="140" width="230" height="220" rx="4" fill="#ffffff" class="screen-flash"/> <!-- Boot content --> <g class="boot-content"> <!-- Screen background gradient --> <rect x="285" y="140" width="230" height="220" rx="4" fill="#0d1117"/> <!-- Red accent line --> <rect x="285" y="140" width="230" height="4" fill="#e60012"/> <!-- Logo - Nintendo Switch style --> <g class="logo" transform="translate(400, 260)"> <!-- Red rounded rectangle --> <rect x="-70" y="-25" width="140" height="50" rx="8" fill="#e60012"/> <!-- Text "NINTENDO" --> <text x="0" y="-2" text-anchor="middle" font-family="Arial, sans-serif" font-weight="bold" font-size="14" fill="#ffffff" letter-spacing="2">NINTENDO</text> <!-- Text "SWITCH" --> <text x="0" y="16" text-anchor="middle" font-family="Arial, sans-serif" font-weight="bold" font-size="12" fill="#ffffff" letter-spacing="4">SWITCH</text> <!-- Small red glow under logo --> <ellipse cx="0" cy="35" rx="50" ry="8" fill="#e60012" opacity="0.3" filter="url(#screenGlow)"/> </g> <!-- Loading dots --> <circle cx="380" cy="330" r="4" fill="#e60012" opacity="0.8"> <animate attributeName="opacity" values="0.3;1;0.3" dur="1s" repeatCount="indefinite"/> </circle> <circle cx="400" cy="330" r="4" fill="#e60012" opacity="0.8"> <animate attributeName="opacity" values="0.3;1;0.3" dur="1s" begin="0.2s" repeatCount="indefinite"/> </circle> <circle cx="420" cy="330" r="4" fill="#e60012" opacity="0.8"> <animate attributeName="opacity" values="0.3;1;0.3" dur="1s" begin="0.4s" repeatCount="indefinite"/> </circle> </g> <!-- Screen glare --> <rect x="285" y="140" width="230" height="220" rx="4" fill="url(#glareGradient)" opacity="0.05"/> <linearGradient id="glareGradient" x1="0" y1="0" x2="1" y2="1"> <stop offset="0%" stop-color="#ffffff" stop-opacity="0.2"/> <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/> </linearGradient> <!-- Top edge detail --> <rect x="265" y="120" width="270" height="4" rx="2" fill="#3a3a3a"/> <!-- Bottom edge detail --> <rect x="265" y="376" width="270" height="4" rx="2" fill="#3a3a3a"/> <!-- Volume buttons (left edge) --> <rect x="260" y="180" width="8" height="25" rx="2" fill="#4a4a4a"/> <rect x="260" y="210" width="8" height="25" rx="2" fill="#4a4a4a"/> <!-- Power button (right edge) --> <rect x="532" y="180" width="8" height="30" rx="2" fill="#4a4a4a"/> <!-- Headphone jack --> <rect x="260" y="260" width="6" height="6" rx="1" fill="#1a1a1a" stroke="#4a4a4a" stroke-width="1"/> <!-- Game card slot --> <rect x="510" y="260" width="20" height="4" rx="1" fill="#1a1a1a" stroke="#4a4a4a" stroke-width="1"/> <!-- USB-C port (bottom) --> <rect x="385" y="380" width="30" height="6" rx="2" fill="#1a1a1a" stroke="#4a4a4a" stroke-width="1"/> <!-- Ventilation holes --> <g fill="#1a1a1a" opacity="0.6"> <circle cx="290" cy="370" r="2"/> <circle cx="300" cy="370" r="2"/> <circle cx="310" cy="370" r="2"/> <circle cx="490" cy="370" r="2"/> <circle cx="500" cy="370" r="2"/> <circle cx="510" cy="370" r="2"/> </g> </g> <!-- Left Joy-Con --> <g class="left-controller" filter="url(#shadow)"> <!-- Main body --> <rect x="195" y="120" width="70" height="260" rx="12" fill="#e60012"/> <!-- Inner rail edge --> <rect x="255" y="125" width="10" height="250" rx="3" fill="#cc0000"/> <!-- Rail connector --> <rect x="258" y="140" width="6" height="30" rx="2" fill="#999"/> <rect x="258" y="180" width="6" height="30" rx="2" fill="#999"/> <rect x="258" y="220" width="6" height="30" rx="2" fill="#999"/> <!-- Joystick area --> <circle cx="230" cy="190" r="22" fill="#1a1a1a"/> <circle cx="230" cy="190" r="18" fill="#2d2d2d"/> <circle cx="230" cy="190" r="12" fill="#3a3a3a"/> <circle cx="230" cy="186" r="4" fill="#4a4a4a" opacity="0.5"/> <!-- D-pad --> <rect x="215" y="260" width="30" height="10" rx="3" fill="#1a1a1a"/> <rect x="225" y="250" width="10" height="30" rx="3" fill="#1a1a1a"/> <circle cx="230" cy="265" r="4" fill="#2d2d2d"/> <!-- Directional arrows on D-pad --> <polygon points="230,252 227,258 233,258" fill="#4a4a4a" opacity="0.5"/> <polygon points="230,278 227,272 233,272" fill="#4a4a4a" opacity="0.5"/> <polygon points="217,265 223,262 223,268" fill="#4a4a4a" opacity="0.5"/> <polygon points="243,265 237,262 237,268" fill="#4a4a4a" opacity="0.5"/> <!-- - Button --> <rect x="212" y="155" width="12" height="4" rx="2" fill="#1a1a1a"/> <!-- Screw dots --> <circle cx="210" cy="135" r="2" fill="#cc0000"/> <circle cx="210" cy="365" r="2" fill="#cc0000"/> <!-- SL button --> <rect x="195" y="160" width="6" height="20" rx="2" fill="#cc0000"/> <!-- SR button --> <rect x="195" y="320" width="6" height="20" rx="2" fill="#cc0000"/> <!-- Glow effect --> <rect x="195" y="120" width="70" height="260" rx="12" fill="#e60012" opacity="0.15" class="joycon-glow"/> </g> <!-- Right Joy-Con --> <g class="right-controller" filter="url(#shadow)"> <!-- Main body --> <rect x="535" y="120" width="70" height="260" rx="12" fill="#e60012"/> <!-- Inner rail edge --> <rect x="535" y="125" width="10" height="250" rx="3" fill="#cc0000"/> <!-- Rail connector --> <rect x="536" y="140" width="6" height="30" rx="2" fill="#999"/> <rect x="536" y="180" width="6" height="30" rx="2" fill="#999"/> <rect x="536" y="220" width="6" height="30" rx="2" fill="#999"/> <!-- Joystick area --> <circle cx="570" cy="190" r="22" fill="#1a1a1a"/> <circle cx="570" cy="190" r="18" fill="#2d2d2d"/> <circle cx="570" cy="190" r="12" fill="#3a3a3a"/> <circle cx="570" cy="186" r="4" fill="#4a4a4a" opacity="0.5"/> <!-- ABXY Buttons --> <circle cx="580" cy="255" r="7" fill="#1a1a1a"/> <!-- X --> <circle cx="595" cy="270" r="7" fill="#1a1a1a"/> <!-- B --> <circle cx="565" cy="270" r="7" fill="#1a1a1a"/> <!-- A --> <circle cx="580" cy="285" r="7" fill="#1a1a1a"/> <!-- Y --> <!-- Button letters --> <text x="580" y="258" text-anchor="middle" font-family="Arial, sans-serif" font-weight="bold" font-size="7" fill="#e60012">X</text> <text x="595" y="273" text-anchor="middle" font-family="Arial, sans-serif" font-weight="bold" font-size="7" fill="#e60012">B</text> <text x="565" y="273" text-anchor="middle" font-family="Arial, sans-serif" font-weight="bold" font-size="7" fill="#e60012">A</text> <text x="580" y="288" text-anchor="middle" font-family="Arial, sans-serif" font-weight="bold" font-size="7" fill="#e60012">Y</text> <!-- + Button --> <rect x="578" y="152" width="4" height="12" rx="2" fill="#1a1a1a"/> <rect x="573" y="157" width="12" height="4" rx="2" fill="#1a1a1a"/> <!-- Home button --> <circle cx="570" cy="330" r="8" fill="#1a1a1a"/> <circle cx="570" cy="330" r="5" fill="#2d2d2d"/> <path d="M570,327 L573,332 L567,332 Z" fill="#e60012" opacity="0.6"/> <!-- Screw dots --> <circle cx="590" cy="135" r="2" fill="#cc0000"/> <circle cx="590" cy="365" r="2" fill="#cc0000"/> <!-- SL button --> <rect x="599" y="160" width="6" height="20" rx="2" fill="#cc0000"/> <!-- SR button --> <rect x="599" y="320" width="6" height="20" rx="2" fill="#cc0000"/> <!-- Glow effect --> <rect x="535" y="120" width="70" height="260" rx="12" fill="#e60012" opacity="0.15" class="joycon-glow"/> </g> <!-- Rail guides on tablet (left) --> <rect x="260" y="140" width="5" height="30" rx="1" fill="#555"/> <rect x="260" y="180" width="5" height="30" rx="1" fill="#555"/> <rect x="260" y="220" width="5" height="30" rx="1" fill="#555"/> <!-- Rail guides on tablet (right) --> <rect x="535" y="140" width="5" height="30" rx="1" fill="#555"/> <rect x="535" y="180" width="5" height="30" rx="1" fill="#555"/> <rect x="535" y="220" width="5" height="30" rx="1" fill="#555"/> <!-- Title text --> <text x="400" y="460" text-anchor="middle" font-family="Arial, sans-serif" font-weight="bold" font-size="16" fill="#e60012" letter-spacing="3" opacity="0.8">NINTENDO SWITCH</text> <!-- Subtitle --> <text x="400" y="480" text-anchor="middle" font-family="Arial, sans-serif" font-size="10" fill="#666" letter-spacing="1" opacity="0.6">JOY-CON CONNECTED</text> <!-- Small decorative red particles --> <circle cx="200" cy="100" r="2" fill="#e60012" opacity="0.4"> <animate attributeName="opacity" values="0.1;0.6;0.1" dur="3s" repeatCount="indefinite"/> </circle> <circle cx="600" cy="100" r="2" fill="#e60012" opacity="0.4"> <animate attributeName="opacity" values="0.1;0.6;0.1" dur="3s" begin="1s" repeatCount="indefinite"/> </circle> <circle cx="400" cy="90" r="1.5" fill="#e60012" opacity="0.3"> <animate attributeName="opacity" values="0.1;0.5;0.1" dur="2.5s" begin="0.5s" repeatCount="indefinite"/> </circle> </svg> ``` La escena muestra la tablet central en colores oscuros, con los dos Joy-Con rojos desplazándose desde los lados hasta acoplarse con un efecto de ajuste. Después, la pantalla se ilumina brevemente y aparece el logotipo de Nintendo Switch con puntos de carga animados, acompañado de un fondo sobrio y detalles de iluminación.