icons/nextjs.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
  <style>
    @keyframes rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }
    @keyframes glow {
      0% { filter: drop-shadow(0 0 2px #ffffff); }
      50% { filter: drop-shadow(0 0 8px #ffffff); }
      100% { filter: drop-shadow(0 0 2px #ffffff); }
    }
    #logo {
      animation: pulse 3s ease-in-out infinite;
    }
    #circle {
      fill: #000;
    }
    #n-path {
      fill: url(#a);
      animation: glow 2s ease-in-out infinite;
    }
    #vertical-line {
      fill: url(#b);
      animation: glow 2s ease-in-out infinite;
    }
  </style>
  
  <g id="logo">
    <circle id="circle" cx="64" cy="64" r="64"/>
    <path id="n-path" d="M106.317 112.014 49.167 38.4H38.4v51.179h8.614v-40.24l52.54 67.884a64.216 64.216 0 0 0 6.763-5.209z"/>
    <path id="vertical-line" d="M81.778 38.4h8.533v51.2h-8.533z"/>
  </g>

  <defs>
    <linearGradient id="a" x1="109" x2="144.5" y1="116.5" y2="160.5" gradientTransform="scale(.71111)" gradientUnits="userSpaceOnUse">
      <stop stop-color="#fff">
        <animate attributeName="stop-color" 
                 values="#ffffff; #00ffff; #ffffff"
                 dur="3s" 
                 repeatCount="indefinite"/>
      </stop>
      <stop offset="1" stop-color="#fff" stop-opacity="0"/>
    </linearGradient>
    <linearGradient id="b" x1="121" x2="120.799" y1="54" y2="106.875" gradientTransform="scale(.71111)" gradientUnits="userSpaceOnUse">
      <stop stop-color="#fff">
        <animate attributeName="stop-color" 
                 values="#ffffff; #00ffff; #ffffff"
                 dur="3s" 
                 repeatCount="indefinite"/>
      </stop>
      <stop offset="1" stop-color="#fff" stop-opacity="0"/>
    </linearGradient>
  </defs>
</svg>