Animated YourJS SVG Logos

Animated YourJS Logo.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="100%" height="100%">
  <defs>
    <radialGradient id="bgGrad" cx="50%" cy="50%" r="70%">
      <stop offset="0%" stop-color="#0b0f19" />
      <stop offset="100%" stop-color="#020617" />
    </radialGradient>

    <linearGradient id="jsYellow" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#fef08a" />
      <stop offset="100%" stop-color="#eab308" />
    </linearGradient>

    <filter id="smoothGlow" x="-80%" y="-80%" width="260%" height="260%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="16" result="blur" />
      <feFlood flood-color="#eab308" class="glow-flood" result="glowColor" />
      <feComposite in="glowColor" in2="blur" operator="in" result="coloredBlur" />
      <feMerge>
        <feMergeNode in="coloredBlur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>

  <style>
    /* Global Typography */
    .font-base {
      font-family: 'SF Pro Display', -apple-system, 'Inter', sans-serif;
      text-anchor: middle;
    }

    /* "Your" Text styles */
    .text-your {
      font-weight: 300;
      font-size: 82px;
      fill: #f8fafc;
      letter-spacing: -1px;
    }

    /* Terminal Cursor Style */
    .cursor {
      font-family: monospace;
      font-weight: 400;
      font-size: 82px;
      fill: #38bdf8;
      animation: blink 1s steps(2, start) infinite;
    }

    /* Dynamic Group Wrapper for scale centering */
    .js-group {
      transform-origin: 250px 310px;
      animation: pulseBox 3s ease-in-out infinite;
    }

    /* Pulsing JS Box */
    .js-box {
      fill: url(#jsYellow);
      filter: url(#smoothGlow);
    }

    /* Animating the shadow opacity smoothly inside the filter */
    .glow-flood {
      animation: pulseShadow 3s ease-in-out infinite;
    }

    /* "JS" Bold Typography */
    .text-js {
      font-weight: 900;
      font-size: 96px;
      fill: #0f172a; 
      letter-spacing: -3px;
    }

    /* Ambient Code Bracket Accents */
    .bracket {
      font-family: monospace, sans-serif;
      font-size: 140px;
      font-weight: 100;
      fill: #1e293b;
      opacity: 0.5;
    }

    /* --- INFINITE LOOP KEYFRAMES --- */
    
    /* Terminal cursor blinking */
    @keyframes blink {
      0%, 100% { opacity: 0; }
      50% { opacity: 1; }
    }

    /* Dramatic, smooth scale matching exactly 1.3 times normal size */
    @keyframes pulseBox {
      0%, 100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.3);
      }
    }

    /* Fades the shadow intensity perfectly in tandem with the 1.3x scale growth */
    @keyframes pulseShadow {
      0%, 100% {
        flood-opacity: 0.15;
      }
      50% {
        flood-opacity: 0.65;
      }
    }
  </style>

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

  <text x="60" y="280" class="bracket" text-anchor="start">{</text>
  <text x="440" y="280" class="bracket" text-anchor="end">}</text>

  <g transform="translate(0, 170)">
    <text x="235" y="0" class="font-base text-your">Your<tspan class="cursor">_</tspan></text>
  </g>

  <g class="js-group">
    <rect x="175" y="235" width="150" height="150" rx="28" class="js-box" />
    <text x="250" y="341" class="font-base text-js">JS</text>
  </g>
</svg>

Hexagon YourJS Logo.svg

Infinity YourJS Logo.svg