nzambello.dev/src/components/Logo.astro

<svg xmlns="http://www.w3.org/2000/svg" class="logo" width="456" height="94" viewBox="0 0 435 94" fill="none">
  <g class="text-container">
    <text x="43" y="79.45" dominant-baseline="ideographic" textLength="324" lengthAdjust="spacingAndGlyphs" class="fills">nzambello</text>
  </g>
  <g class="text-container text-container--light">
    <text x="372" y="79.45" dominant-baseline="ideographic" textLength="72" lengthAdjust="spacingAndGlyphs" class="fills">/&gt;</text>
  </g>
  <g class="text-container text-container--light">
    <text y="79.45" dominant-baseline="ideographic" textLength="36" lengthAdjust="spacingAndGlyphs" class="fills">&lt;</text>
  </g>
</svg>
<style>
  svg.logo {
    width: 10rem;
    height: auto;
    fill: none;
    color: var(--text-color);
  }
  @media (max-width: 575px) {
    svg.logo {
      width: 9rem;
    }
  }
  svg.logo .text-container {
    font-family: 'Fira Code';
    font-style: normal;
    font-weight: 700;
    font-size: 72px;
    text-decoration: currentColor;
    direction: ltr;
    fill: currentColor;
    fill-opacity: 1;
  }
  svg.logo .text-container--light {
    fill-opacity: 0.6;
  }
  svg.logo:hover .text-container--light,
  svg.logo:focus .text-container--light {
    fill-opacity: 0.85;
  }
  svg.logo .fills {
    text-transform: none;
    letter-spacing: 2px;
    white-space: pre;
  }
</style>