Files

1 line
3.4 KiB
XML

<svg xmlns="http://www.w3.org/2000/svg" width="960" height="44" viewBox="0 0 960 44" role="img" aria-labelledby="title desc"><title id="title">Ruflo signal divider</title><desc id="desc">Illustrative Ruflo artwork. Motion is decorative; no live metrics. Supports reduced motion.</desc><defs><linearGradient id="bg" x2="1" y2="1"><stop stop-color="#181821"/><stop offset="1" stop-color="#101018"/></linearGradient><linearGradient id="neon"><stop stop-color="#27eaff"/><stop offset=".55" stop-color="#ffe32e"/><stop offset="1" stop-color="#ff168f"/></linearGradient><filter id="glow" x="-60%" y="-100%" width="220%" height="300%"><feGaussianBlur stdDeviation="3"/><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter><filter id="soft" x="-20%" y="-80%" width="140%" height="260%"><feGaussianBlur stdDeviation="1.5"/><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter><pattern id="grid" width="96" height="48" patternUnits="userSpaceOnUse"><path d="M0 0H96M0 24H96M48 0V24M0 24V48M96 24V48" fill="none" stroke="#8d6683" stroke-opacity=".04"/></pattern></defs><style>text{font-family:Arial,Helvetica,sans-serif}.mono{font-family:monospace}.flow{stroke-dasharray:12 40;animation:flow 5s linear infinite;filter:url(#glow)}.tube{filter:url(#glow);animation:flicker 13s linear infinite}.tube2{filter:url(#glow);animation:flicker 17s 3s linear infinite}.gold{fill:#ffe64c;filter:url(#soft)}@keyframes flicker{0%,43%,45%,47%,100%{opacity:1}44%,46%{opacity:.55}}.orbit{transform-box:fill-box;transform-origin:center;animation:spin 14s linear infinite}.pulse{animation:pulse 3s ease-in-out infinite}.rise{animation:rise 7s ease-in-out infinite}@keyframes flow{to{stroke-dashoffset:-208}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}@keyframes rise{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}.rim{stroke-dasharray:90 390;animation:rim 9s linear infinite;filter:url(#glow)}.sweep{animation:sweep 8s ease-in-out infinite;opacity:.18}.halo{transform-box:fill-box;transform-origin:center;animation:halo 4s ease-out infinite}.equalizer{transform-box:fill-box;transform-origin:bottom;animation:eq 1.6s ease-in-out infinite alternate}@keyframes rim{to{stroke-dashoffset:-960}}@keyframes sweep{0%,100%{transform:translateX(-200px);opacity:0}30%,70%{opacity:.18}85%{transform:translateX(1100px);opacity:0}}@keyframes halo{0%{transform:scale(.8);opacity:0}25%{opacity:.4}100%{transform:scale(1.25);opacity:0}}@keyframes eq{from{transform:scaleY(.3)}to{transform:scaleY(1)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}.sweep,.halo{display:none}}</style><rect x="1" y="1" width="958" height="42" rx="18" fill="url(#bg)" stroke="#26364e"/><rect width="960" height="44" rx="18" fill="url(#grid)"/><rect x="10" y="10" width="940" height="24" rx="14" fill="none" stroke="#ff168f" stroke-width="2.5" class="tube"/><rect x="13" y="13" width="934" height="18" rx="12" fill="none" stroke="#ff9ad0" stroke-opacity=".5" stroke-width=".7"/><rect class="rim" x="10" y="10" width="940" height="24" rx="14" fill="none" stroke="#ffc0e5" stroke-width="1.4"/><path d="M20 22H390L410 10H550L570 22H940" fill="none" stroke="#294359"/><path class="flow" d="M20 22H390L410 10H550L570 22H940" fill="none" stroke="url(#neon)"/><text x="480" y="31" text-anchor="middle" fill="#80a9bf" font-size="10" letter-spacing="3">RUFLO</text></svg>