JSFiddle - React, Tailwind, and code Playground

by skeemer

HTML

<span>M</span>atrik<span>S</span>ee<div id="arcs">
    <div>
        <div>
          <div>
          </div>
        </div>
    </div>
</div>

CSS

body {
  font-size: 60px;
}
#arcs {
  display: inline-block;
  position: relative;
  transform: rotate(45deg);
}
#arcs div {
    box-sizing: border-box;
    border: 3px solid #000;
    display: inline-block;
    min-width: 0.25em;
    min-height: 0.25em;
    padding: 0.2em;
    border-radius: 50%;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
}