<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Amber Logo</title>
  <style>
    /* Base (Mobile-First) Styling */
    body {
      margin: 0;
      overflow-x: hidden;
      background: #fff;
      font-family: 'Caprasimo', sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    #container {
      width: 100vw; /* Full width on mobile */
      height: 33.33vw; /* Proportional height based on width */
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .amber-instance {
      width: 100%;
      height: 100%; /* Matches container */
      overflow: hidden;
    }

    svg {
      width: 100%;
      height: 100%;
    }

    /* Base text size for mobile */
    svg text {
      font-size: 60px; /* Smaller base for mobile */
    }

    svg tspan {
      font-size: 12px; /* Smaller base for mobile */
    }

    /* Custom properties for gradient animation */
    @property --gradient-x {
      syntax: '<percentage>';
      inherits: false;
      initial-value: 50%;
    }

    @property --gradient-y {
      syntax: '<percentage>';
      inherits: false;
      initial-value: 50%;
    }

    .animated-gradient {
      background: radial-gradient(circle at var(--gradient-x) var(--gradient-y), #FFB999 0%, #E6CCE6 33%, #CCE6CC 66%, #99E6E6 100%);
      width: 100%;
      height: 100%;
      animation: moveGradient 20s infinite linear;
    }

    @keyframes moveGradient {
      0% { --gradient-x: 0%; --gradient-y: 0%; }
      25% { --gradient-x: 100%; --gradient-y: 0%; }
      50% { --gradient-x: 100%; --gradient-y: 100%; }
      75% { --gradient-x: 0%; --gradient-y: 100%; }
      100% { --gradient-x: 0%; --gradient-y: 0%; }
    }

    /* Adjustments for larger screens */
    @media (min-width: 768px) {
      #container {
        width: min(100vw, 1000px); /* Caps at 1000px on large screens */
        height: 500px; /* Fixed height for desktop */
      }

      svg text {
        font-size: 120px; /* Original size for desktop */
      }

      svg tspan {
        font-size: 24px; /* Original size for desktop */
      }
    }
  </style>
  <link href='https://fonts.googleapis.com/css2?family=Caprasimo&display=swap' rel='stylesheet'>
</head>
<body>
  <div id='container'>
    <div class='amber-instance'>
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' role='img' aria-label='Amber Logo with Retro Lines'>
        <title>Amber Logo - Nice Version</title>
        <defs>
          <path id='swoosh-path' d='M50,220 C250,180 750,180 950,220'/>
          <clipPath id='text-mask-1'>
            <text font-family="'Caprasimo', Arial, sans-serif" letter-spacing='-3' stroke='none'>
              <textPath href='#swoosh-path' startOffset='2%'>amber<tspan dx='10' dy='-40' stroke='none'>®</tspan></textPath>
            </text>
          </clipPath>
        </defs>
        <g clip-path='url(#text-mask-1)'>
          <foreignObject x='0' y='100' width='1000' height='300'>
            <div class='animated-gradient'></div>
          </foreignObject>
        </g>
        <path stroke='#FFFFFF' stroke-width='0.5' stroke-opacity='1.0' fill='none' d='M50,180 C200,100 400,200 600,100 S850,160 950,130'/>
        <path stroke='#FFFFFF' stroke-width='1' stroke-opacity='1.0' fill='none' d='M50,195 C200,115 400,215 600,115 S850,175 950,145'/>
        <path stroke='#FFFFFF' stroke-width='1.5' stroke-opacity='1.0' fill='none' d='M50,205 C200,125 400,225 600,125 S850,185 950,155'/>
        <path stroke='#FFFFFF' stroke-width='2' stroke-opacity='1.0' fill='none' d='M50,213 C200,133 400,233 600,133 S850,193 950,163'/>
        <path stroke='#FFFFFF' stroke-width='2.5' stroke-opacity='1.0' fill='none' d='M50,220 C200,140 400,240 600,140 S850,200 950,170'/>
        <path stroke='#FFFFFF' stroke-width='3' stroke-opacity='1.0' fill='none' d='M50,226 C200,146 400,246 600,146 S850,206 950,176'/>
        <path stroke='#FFFFFF' stroke-width='3' stroke-opacity='1.0' fill='none' d='M50,231 C200,151 400,251 600,151 S850,211 950,181'/>
        <path stroke='#FFFFFF' stroke-width='3.5' stroke-opacity='1.0' fill='none' d='M50,235 C200,155 400,255 600,155 S850,215 950,185'/>
        <path stroke='#FFFFFF' stroke-width='4' stroke-opacity='1.0' fill='none' d='M50,238 C200,158 400,258 600,158 S850,218 950,188'/>
      </svg>
    </div>
  </div>
</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.