<div class="cle-circle-bg">
  <p class="cle-circle-wrap">
    Check out
    <a href="#" class="cle-circle">
      the link
      <svg class="cle-circle-svg" viewBox="0 0 100 36" aria-hidden="true">
        <ellipse
          cx="50"
          cy="18"
          rx="46"
          ry="14"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
        />
      </svg>
    </a>
    here
  </p>
</div>

.cle-circle-bg {
  padding: 24px;
  background: #f4f5f9;
  border-radius: 10px;
}
.cle-circle-wrap {
  margin: 0;
  font:
    500 16px/1.5 system-ui,
    sans-serif;
  color: #2a2a3e;
}
.cle-circle {
  position: relative;
  display: inline-block;
  padding: 0 6px;
  color: #6b8cff;
  font-weight: 600;
  text-decoration: none;
}
.cle-circle-svg {
  position: absolute;
  inset: -4px -2px;
  width: calc(100% + 4px);
  height: calc(100% + 8px);
  color: #6b8cff;
  pointer-events: none;
  overflow: visible;
}
.cle-circle-svg ellipse {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transform-origin: center;
  transform: rotate(-3deg);
  transition: stroke-dashoffset 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.cle-circle:hover .cle-circle-svg ellipse,
.cle-circle:focus-visible .cle-circle-svg ellipse {
  stroke-dashoffset: 0;
}