Animated YourJS SVG Logos

Animated YourJS Logo.svg

Hexagon YourJS Logo.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" style="min-width: 90vw; min-height: 90vw;">

<defs>

<radialGradient id="bg" cx="50%" cy="35%" r="75%">
    <stop offset="0%" stop-color="#171b35"/>
    <stop offset="100%" stop-color="#06070d"/>
</radialGradient>

<linearGradient id="brand" x1="0%" y1="0%" x2="100%" y2="100%">
    <stop offset="0%" stop-color="#38bdf8"/>
    <stop offset="50%" stop-color="#f7df1e"/>
    <stop offset="100%" stop-color="#fb923c"/>
</linearGradient>

</defs>

<style>

text {
  font-family: Inter, Segoe UI, sans-serif;
  text-anchor: middle;
}

.your {
  fill: #e2e8f0;
  font-size: 48px;
  font-weight: 400;
}

.js {
  fill: #f7df1e;
  font-size: 64px;
  font-weight: 800;
  filter: drop-shadow(0 2px 8px rgba(247, 223, 30, 0.2));
}

/* Animations */

.logo {
  animation: float 6s ease-in-out infinite;
  transform-origin: 250px 215px;
}

/* Tracing laser effect for the polygon */
.trace-poly {
  stroke-dasharray: 200 400;
  stroke-dashoffset: 600;
  animation: trace 4s linear infinite;
}

.code-element {
  animation: neonGlow 4s ease-in-out infinite alternate;
}

.text-group {
  animation: textEntrance 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: 250px 425px;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(0.5deg); }
}

@keyframes trace {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes neonGlow {
  0%, 100% { opacity: 0.85; filter: drop-shadow(0 0 2px rgba(56, 189, 248, 0.2)); }
  50% { opacity: 1; filter: drop-shadow(0 0 8px rgba(247, 223, 30, 0.5)); }
}

@keyframes textEntrance {
  0% { opacity: 0; transform: translateY(15px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

</style>

<rect width="500" height="500" rx="28" fill="url(#bg)"/>

<g class="logo">

  <polygon
    points="250,85 365,150 365,280 250,345 135,280 135,150"
    fill="none"
    stroke="#1e293b"
    stroke-width="10"
    stroke-linejoin="round"/>

  <polygon class="trace-poly"
    points="250,85 365,150 365,280 250,345 135,280 135,150"
    fill="none"
    stroke="url(#brand)"
    stroke-width="10"
    stroke-linecap="round"
    stroke-linejoin="round"/>

  <g class="code-element">
    <polyline
      points="215,160 170,205 215,250"
      fill="none"
      stroke="#38bdf8"
      stroke-width="14"
      stroke-linecap="round"
      stroke-linejoin="round"/>

    <polyline
      points="285,160 330,205 285,250"
      fill="none"
      stroke="#fb923c"
      stroke-width="14"
      stroke-linecap="round"
      stroke-linejoin="round"/>

    <line
      x1="270"
      y1="145"
      x2="230"
      y2="265"
      stroke="#f7df1e"
      stroke-width="16"
      stroke-linecap="round"/>
  </g>

</g>

<g class="text-group">
  <text x="250" y="425">
    <tspan class="your">Your</tspan>
    <tspan class="js">JS</tspan>
  </text>
</g>

</svg>

Infinity YourJS Logo.svg