Untitled

<!DOCTYPE html>
<html>
<body>

<!-- put this once near the top of the page (not inside every header/footer) -->
<svg width="0" height="0"
     style="position:absolute; left:-9999px; top:-9999px;"
     aria-hidden="true">
  <symbol id="hero-join" viewBox="0 0 190 100">
    <text x="70" y="98" text-anchor="middle"
          class="hero-join__text">∩</text>
    <text x="105" y="98" text-anchor="middle"
          class="hero-join__text">∩</text>
    <text x="140" y="98" text-anchor="middle"
          class="hero-join__text">∩</text>
  </symbol>
</svg>


<span style="font-family: system-ui, Arial, sans-serif; font-size:64px;
            line-height:1; display:inline-flex; align-items:baseline;">
  <span>ha</span>
    <svg class="hero-join" aria-hidden="true">
       <use href="#hero-join"></use>
    </svg>
  <span style="display:inline-block; transform: translate(-0.62em, 0.00em);">er</span>
</span>
</body>
</html>