<hr>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" >
  <rect width="100" height="100" stroke="none" fill="black" />
  <path d="M 1 50 A 49 49 0 0 1 99 50 " stroke-width="2" fill="transparent" />
  <circle cx="50" cy="50" r="34" stroke-width="10" />
</svg>
:root{
  --stroke: #0059dd;
  --size: 60px;
}
body {
  background: black;
}
hr {
  background-color: var(--stroke);
  margin: 50px 0 0 0;
  height: 1px;
  border: none;
}
svg {
  position: relative;
  top: calc(-0.5*var(--size));
  width: var(--size);
  display: block;
  margin: auto;
  stroke: var(--stroke);
}
circle {
  cursor: pointer;
}
document.querySelector("circle").addEventListener("click", function(){alert("You clicked the circle")});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.