Evolución y soporte

<!-- Ninja Ninsoft · medita PEGA ESTE ARCHIVO INLINE EN EL HTML. No lo uses como ni como background-image: en ese modo el navegador aisla el documento y pierdes los colores de marca, la animacion de piernas y brazos, y overflow:visible. Todo va dentro: geometria, estilos y script. No hay dependencias. El archivo trae width/height por defecto calculados para que EL NINJA mida 84 px. Ojo: no el contenedor — el viewBox incluye el recorrido del gesto, asi que cada variante lleva su propio par. Son ATRIBUTOS, la prioridad mas baja que hay en CSS: cualquier regla los pisa. Para otro tamano basta con .ninja { width: X } y escala solo. .ninja { display:block; width:104px; height:auto; } --> .ninja{--ninja-ink:#3e51a5;--ninja-fill:#f8f0e3} .ninja { overflow: visible; } .nj-ninja-full { --p: 63.69px, 100.24px; --pn: -63.69px, -100.24px; transform-origin: 0 0; } .nj-cabeza { --p: 52.92px, 50.40px; --pn: -52.92px, -50.40px; transform-origin: 0 0; } .nj-brazo-i { --p: 40.00px, 49.03px; --pn: -40.00px, -49.03px; transform-origin: 0 0; } .nj-brazo-d { --p: 63.00px, 49.03px; --pn: -63.00px, -49.03px; transform-origin: 0 0; } .nj-cinta { --p: 33.24px, 27.81px; --pn: -33.24px, -27.81px; transform-origin: 0 0; } .nj-ojo-i { --p: 44.8545px, 29.2241px; --pn: -44.8545px, -29.2241px; transform-origin: 0 0; } .nj-ojo-d { --p: 59.9812px, 29.2241px; --pn: -59.9812px, -29.2241px; transform-origin: 0 0; } .nj-mirada, .nj-ojos { transform-origin: 0 0; } .nj-cinta-viento { --p: 33.24px, 27.81px; --pn: -33.24px, -27.81px; transform-origin: 0 0; } @media (prefers-reduced-motion: reduce) { .ninja * { animation: none !important; } } .idle-medita { --a-flote: 9px; /* medido: 9 u pico a pico = 6,3 px a 80, sobre el umbral de 4,4 */ --a-deriva: 1.4deg; /* nunca del todo a plomo */ --a-cabeza: 1.1deg; --a-cinta: 9deg; /* flotabilidad: sigue a la VELOCIDAD del flote */ --a-brazo: 1.8deg; --dur: 6.5s; --dur-deriva: 9.1s; /* 6,5 y 9,1 no cuadran: la deriva nunca repite igual */ --dur-cinta: 4.3s; } .idle-medita .nj-ninja-full { --p: 48.90px, 53.00px; --pn: -48.90px, -53.00px; } .idle-medita .nj-cabeza { --p: 57.50px, 60.00px; --pn: -57.50px, -60.00px; } .idle-medita .nj-cinta-viento { --p: 41.60px, 24.00px; --pn: -41.60px, -24.00px; transform-origin: 0 0; } .idle-medita .nj-brazo-i { --p: 38.00px, 56.00px; --pn: -38.00px, -56.00px; } .idle-medita .nj-brazo-d { --p: 76.50px, 57.00px; --pn: -76.50px, -57.00px; } .idle-medita .nj-ninja-full { animation: med-flote var(--dur) infinite, med-deriva var(--dur-deriva) ease-in-out infinite; } .idle-medita .nj-cabeza { animation: med-cabeza var(--dur) infinite; } .idle-medita .nj-cinta { animation: med-cinta var(--dur) infinite; } .idle-medita .nj-cinta-viento { animation: esp-viento var(--dur-cinta) ease-in-out infinite; } .idle-medita .nj-brazo-i { animation: med-brazoi var(--dur) infinite; } .idle-medita .nj-brazo-d { animation: med-brazod var(--dur) infinite; } .idle-medita .nj-mota-1 { animation: med-mota 3.7s linear infinite; } .idle-medita .nj-mota-2 { animation: med-mota 4.3s linear infinite; animation-delay: 1.4s; } .idle-medita .nj-mota-3 { animation: med-mota 5.1s linear infinite; animation-delay: .6s; } .idle-medita .nj-mota-4 { animation: med-mota 4.7s linear infinite; animation-delay: 2.2s; } .idle-medita .nj-mota-5 { animation: med-mota 5.9s linear infinite; animation-delay: 3.1s; } .idle-medita .nj-mota-6 { animation: med-mota 3.3s linear infinite; animation-delay: 1.9s; } @keyframes esp-viento { 0% { transform: translate(var(--p)) rotate(0deg) translate(var(--pn)); } 33% { transform: translate(var(--p)) rotate(var(--a-cinta)) translate(var(--pn)); } 66% { transform: translate(var(--p)) rotate(calc(var(--a-cinta) * -.7)) translate(var(--pn)); } 100% { transform: translate(var(--p)) rotate(0deg) translate(var(--pn)); } } @keyframes med-brazod { 0% { transform: translate(var(--p)) rotate(0deg) translate(var(--pn)); } 46% { transform: translate(var(--p)) rotate(var(--a-brazo)) translate(var(--pn)); } 84% { transform: translate(var(--p)) rotate(calc(var(--a-brazo) * .15)) translate(var(--pn)); } 100% { transform: translate(var(--p)) rotate(0deg) translate(var(--pn)); } } @keyframes med-brazoi { /* el mudra respira, casi nada */ 0% { transform: translate(var(--p)) rotate(0deg) translate(var(--pn)); } 44% { transform: translate(var(--p)) rotate(calc(var(--a-brazo) * -1)) translate(var(--pn)); } 82% { transform: translate(var(--p)) rotate(calc(var(--a-brazo) * -.15)) translate(var(--pn)); } 100% { transform: translate(var(--p)) rotate(0deg) translate(var(--pn)); } } @keyframes med-cabeza { /* la cabeza llega tarde al flote: cuello blando */ 0% { transform: translate(var(--p)) rotate(0deg) translate(var(--pn)); } 25% { transform: translate(var(--p)) rotate(calc(var(--a-cabeza) * -1)) translate(var(--pn)); } 46% { transform: translate(var(--p)) rotate(calc(var(--a-cabeza) * -.2)) translate(var(--pn)); } 70% { transform: translate(var(--p)) rotate(var(--a-cabeza)) translate(var(--pn)); } 92% { transform: translate(var(--p)) rotate(calc(var(--a-cabeza) * .25)) translate(var(--pn)); } 100% { transform: translate(var(--p)) rotate(0deg) translate(var(--pn)); } } @keyframes med-cinta { /* Arrastre: la deflexion sigue a la velocidad del cuerpo. 0% abajo (parado, neutra) · 20% subiendo rapido (cae) 40% arriba (parado, neutra) · 70% bajando rapido (sube) */ 0% { transform: translate(var(--p)) rotate(0deg) translate(var(--pn)); } 20% { transform: translate(var(--p)) rotate(var(--a-cinta)) translate(var(--pn)); } 40% { transform: translate(var(--p)) rotate(0deg) translate(var(--pn)); } 70% { transform: translate(var(--p)) rotate(calc(var(--a-cinta) * -.85)) translate(var(--pn)); } 100% { transform: translate(var(--p)) rotate(0deg) translate(var(--pn)); } } @keyframes med-deriva { /* ciclo propio: se inclina despacio y vuelve */ 0% { transform: translate(var(--p)) rotate(calc(var(--a-deriva) * -1)) translate(var(--pn)); } 50% { transform: translate(var(--p)) rotate(var(--a-deriva)) translate(var(--pn)); } 100% { transform: translate(var(--p)) rotate(calc(var(--a-deriva) * -1)) translate(var(--pn)); } } @keyframes med-flote { /* asciende en el 40% e inhala; desciende en el 60% y exhala */ 0% { translate: 0 0; animation-timing-function: cubic-bezier(.35,0,.25,1); } 40% { translate: 0 calc(var(--a-flote) * -1); animation-timing-function: cubic-bezier(.4,0,.5,1); } 78% { translate: 0 calc(var(--a-flote) * -.12); animation-timing-function: cubic-bezier(.5,0,.6,1); } 100% { translate: 0 0; } } @keyframes med-mota { 0% { opacity: 0; transform: translate(0, 2px); stroke-width: 3; } 18% { opacity: .7; } 65% { opacity: .45; transform: translate(-.5px, -9px); stroke-width: 2.2; } 100% { opacity: 0; transform: translate(-1px, -18px); stroke-width: 1.3; } }