Animated YourJS SVG Logos

Animated YourJS Logo.svg

Hexagon YourJS Logo.svg

Infinity YourJS Logo.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="100%" height="100%">
  <defs>
    <radialGradient id="cyberBg" cx="50%" cy="45%" r="70%">
      <stop offset="0%" stop-color="#141530" />
      <stop offset="60%" stop-color="#070814" />
      <stop offset="100%" stop-color="#020205" />
    </radialGradient>

    <linearGradient id="gridFade" x1="0%" y1="100%" x2="0%" y2="0%">
      <stop offset="0%" stop-color="#1e1b4b" stop-opacity="0" />
      <stop offset="50%" stop-color="#3b82f6" stop-opacity="0.25" />
      <stop offset="100%" stop-color="#1e1b4b" stop-opacity="0" />
    </linearGradient>

    <linearGradient id="jsGold" x1="0%" y1="100%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#eab308" />
      <stop offset="50%" stop-color="#facc15" />
      <stop offset="100%" stop-color="#38bdf8" />
    </linearGradient>

    <linearGradient id="cyberCyan" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#38bdf8" />
      <stop offset="100%" stop-color="#0369a1" />
    </linearGradient>

    <filter id="neonGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur1" />
      <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur2" />
      <feMerge>
        <feMergeNode in="blur1" />
        <feMergeNode in="blur2" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>

  <style>
    /* Typography Setup */
    .brand-text {
      font-family: 'Inter', -apple-system, system-ui, sans-serif;
      text-anchor: middle;
      dominant-baseline: central;
    }
    
    .text-light {
      font-weight: 500;
      fill: #38bdf8;
      letter-spacing: -0.5px;
      font-size: 60px;
      filter: drop-shadow(0 5px 5px rgba(56, 189, 248, 0.6));
    }

    .text-bold {
      font-weight: 900;
      fill: #facc15;
      letter-spacing: -0.5px;
      font-size: 70px;
      filter: drop-shadow(0 5px 5px rgba(250, 204, 21, 0.6));
    }

    /* Core Logo Loop Animations */
    .loop-track {
      stroke: #0f172a;
      stroke-width: 14;
      fill: none;
    }

    .loop-pulse {
      fill: none;
      stroke-width: 14;
      stroke-dasharray: 160 520;
      animation: flowEffect 6s linear infinite;
    }

    .pulse-1 {
      stroke: url(#jsGold);
      animation-delay: 0s;
    }

    .pulse-2 {
      stroke: url(#cyberCyan);
      animation-delay: -3s;
    }

    .center-node {
      transform-origin: 250px 210px;
      animation: ambientFloat 6s ease-in-out infinite;
    }

    /* Technical Radar Overlay */
    .radar-lines {
      stroke: #1d4ed8;
      stroke-width: 1.2;
      opacity: 0.2;
    }

    /* --- KEYFRAME ANIMATIONS --- */
    @keyframes flowEffect {
      0% { stroke-dashoffset: 0; }
      100% { stroke-dashoffset: -680; }
    }

    @keyframes ambientFloat {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-6px); }
    }
  </style>

  <rect width="100%" height="100%" fill="url(#cyberBg)" rx="32" />

  <g stroke="url(#gridFade)" stroke-width="1" opacity="0.7">
    <line x1="0" y1="100" x2="500" y2="100" />
    <line x1="0" y1="150" x2="500" y2="150" />
    <line x1="0" y1="200" x2="500" y2="200" />
    <line x1="0" y1="250" x2="500" y2="250" />
    <line x1="0" y1="300" x2="500" y2="300" />
    <line x1="0" y1="350" x2="500" y2="350" />
    <line x1="0" y1="400" x2="500" y2="400" />
    
    <line x1="50" y1="0" x2="50" y2="500" />
    <line x1="100" y1="0" x2="100" y2="500" />
    <line x1="150" y1="0" x2="150" y2="500" />
    <line x1="200" y1="0" x2="200" y2="500" />
    <line x1="250" y1="0" x2="250" y2="500" />
    <line x1="300" y1="0" x2="300" y2="500" />
    <line x1="350" y1="0" x2="350" y2="500" />
    <line x1="400" y1="0" x2="400" y2="500" />
    <line x1="450" y1="0" x2="450" y2="500" />
  </g>

  <g class="radar-lines">
    <circle cx="250" cy="210" r="140" fill="none" stroke-dasharray="8 6" />
    <circle cx="250" cy="210" r="85" fill="none" stroke-dasharray="3 4" />
    <circle cx="250" cy="210" r="30" fill="none" opacity="0.3" />
  </g>

  <g class="center-node">
    <path class="loop-track" stroke-linecap="round" d="M 250 210 C 290 140, 360 140, 360 210 C 360 280, 290 280, 250 210 C 210 140, 140 140, 140 210 C 140 280, 210 280, 250 210 Z" />
    <path class="loop-pulse pulse-1" stroke-linecap="round" filter="url(#neonGlow)" d="M 250 210 C 290 140, 360 140, 360 210 C 360 280, 290 280, 250 210 C 210 140, 140 140, 140 210 C 140 280, 210 280, 250 210 Z" />
    <path class="loop-pulse pulse-2" stroke-linecap="round" filter="url(#neonGlow)" d="M 250 210 C 290 140, 360 140, 360 210 C 360 280, 290 280, 250 210 C 210 140, 140 140, 140 210 C 140 280, 210 280, 250 210 Z" />
  </g>

  <g transform="translate(250, 320)">
    <g>
      <text class="brand-text" x="0" y="0">
        <tspan class="text-light">Your</tspan><tspan class="text-bold">JS</tspan>
      </text>
      <animateTransform 
        attributeName="transform" 
        type="scale" 
        values="1; 1.2; 1" 
        keyTimes="0; 0.5; 1" 
        dur="3s" 
        repeatCount="indefinite" />
    </g>
  </g>
</svg>