CodePen Embed - 3D CSS torus

<input type="radio" name="ngon" id="x3">
<input type="radio" name="ngon" id="x4">
<input type="radio" name="ngon" id="x5">
<input type="radio" name="ngon" id="x6">
<input type="radio" name="ngon" id="x8">
<input type="radio" name="ngon" id="x16" checked>
<input type="radio" name="ngon" id="x32">

<input type="radio" name="girth" id="d10">
<input type="radio" name="girth" id="d25" checked>
<input type="radio" name="girth" id="d33">
<input type="radio" name="girth" id="d50">
<input type="radio" name="girth" id="d66">

<div class="scene">
  <div class="pivot">
    <div class="torus">
      <div class="segment">
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
      </div>
      <div class="segment">
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
      </div>
      <div class="segment">
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
      </div>
      <div class="segment">
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
      </div>
      <div class="segment">
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
      </div>
      <div class="segment">
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
      </div>
      <div class="segment">
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
      </div>
      <div class="segment">
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
      </div>
      <div class="segment">
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
      </div>
      <div class="segment">
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
      </div>
      <div class="segment">
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
      </div>
      <div class="segment">
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
      </div>
      <div class="segment">
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
      </div>
      <div class="segment">
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
      </div>
      <div class="segment">
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
      </div>
      <div class="segment">
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
      </div>
      <div class="segment">
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
      </div>
      <div class="segment">
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
      </div>
      <div class="segment">
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
      </div>
      <div class="segment">
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
      </div>
      <div class="segment">
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
      </div>
      <div class="segment">
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
      </div>
      <div class="segment">
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
      </div>
      <div class="segment">
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
      </div>
      <div class="segment">
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
      </div>
      <div class="segment">
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
      </div>
      <div class="segment">
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
      </div>
      <div class="segment">
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
      </div>
      <div class="segment">
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
      </div>
      <div class="segment">
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
      </div>
      <div class="segment">
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
      </div>
      <div class="segment">
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
        <div class="facet"></div>
      </div>
    </div>
  </div>
</div>

<nav>

  <fieldset id="sides">
    <p><span>S</span></p>
    <p><span>E</span></p>
    <p><span>G</span></p>
    <p><span>M</span></p>
    <p><span>E</span></p>
    <p><span>N</span></p>
    <p><span>T</span></p>
    <p><span>S</span></p>
    <label for="x3" id="l3"><span>3</span></label>
    <label for="x4" id="l4"><span>4</span></label>
    <label for="x5" id="l5"><span>5</span></label>
    <label for="x6" id="l6"><span>6</span></label>
    <label for="x8" id="l8"><span>8</span></label>
    <label for="x16" id="l16"><span>16</span></label>
    <label for="x32" id="l32"><span>32</span></label>
  </fieldset>
  
  <fieldset id="thickness">
    <p><span>G</span></p>
    <p><span>I</span></p>
    <p><span>R</span></p>
    <p><span>T</span></p>
    <p><span>H</span></p>
    <label for="d10" id="l10"><span>&#8530</span></label>
    <label for="d25" id="l25"><span>&#188</span></label>
    <label for="d33" id="l33"><span>&#8531</span></label>
    <label for="d50" id="l50"><span>&#189</span></label>
    <label for="d66" id="l66"><span>&#8532</span></label>
  </fieldset>

</nav>

body {
  margin: 0;
  box-sizing: border-box;
  background-color: #333;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}

body * {
  position: absolute;
}

input {
  display: none;
}

nav, .scene {
  font-size: .75vh;
}

.scene {
  width: 100em;
  aspect-ratio: 1;
  pointer-events: none;
}

.scene * {
  transform-style: preserve-3d;
}

.pivot {
  rotate: x -30deg;
  animation: spin 12s linear infinite;
}

.pivot, .torus {
  inset: 0;
}

.torus {
 /* defines the level of detail of the ring's segments and facets - at 32 it appears almost ideally round, but at lower numbers (preferably multiples of 4) it will look more angular */
  --angle: calc(360deg/var(--ngon));
  animation: roll 8s linear infinite;
}

/* to avoid displaying surplus segments and facets in case of lowering the --ngon value; the HTML contains 32 segments, each containing 32 facets */ 

#x3:checked ~ .scene .torus {
  --ngon: 3;
}

#x4:checked ~ .scene .torus {
  --ngon: 4;
}

#x5:checked ~ .scene .torus {
  --ngon: 5;
}

#x6:checked ~ .scene .torus {
  --ngon: 6;
}

#x8:checked ~ .scene .torus {
  --ngon: 8;
}

#x16:checked ~ .scene .torus {
  --ngon: 16;
}

#x32:checked ~ .scene .torus {
  --ngon: 32;
}

#x3:checked ~ .scene :is(.segment,.facet):nth-child(n+4) { /* the number added to n -- here: 33 -- should be the value of --ngon (here: 32) plus 1  */
  display: none;
}

#x4:checked ~ .scene :is(.segment,.facet):nth-child(n+5) { /* the number added to n -- here: 33 -- should be the value of --ngon (here: 32) plus 1  */
  display: none;
}

#x5:checked ~ .scene :is(.segment,.facet):nth-child(n+6) { /* the number added to n -- here: 33 -- should be the value of --ngon (here: 32) plus 1  */
  display: none;
}

#x6:checked ~ .scene :is(.segment,.facet):nth-child(n+7) { /* the number added to n -- here: 33 -- should be the value of --ngon (here: 32) plus 1  */
  display: none;
}

#x8:checked ~ .scene :is(.segment,.facet):nth-child(n+9) { /* the number added to n -- here: 33 -- should be the value of --ngon (here: 32) plus 1  */
  display: none;
}

#x16:checked ~ .scene :is(.segment,.facet):nth-child(n+17) { /* the number added to n -- here: 33 -- should be the value of --ngon (here: 32) plus 1  */
  display: none;
}

#x32:checked ~ .scene :is(.segment,.facet):nth-child(n+33) { /* the number added to n -- here: 33 -- should be the value of --ngon (here: 32) plus 1  */
  display: none;
}

.segment {
  inset: calc(50em*(1 - var(--HVratio)));
  transform: rotateY(calc(var(--segStep)*var(--angle))) translateX(calc(50em*(1 - var(--HVratio))*cos(calc(var(--angle)/2)))) scaleX(cos(calc(var(--angle)/2)));
  display: grid;
  place-items: center;
}

.segment:nth-child(1) {
  --segStep: 0;
}

.segment:nth-child(2) {
  --segStep: 1;
}

.segment:nth-child(3) {
  --segStep: 2;
}

.segment:nth-child(4) {
  --segStep: 3;
}

.segment:nth-child(5) {
  --segStep: 4;
}

.segment:nth-child(6) {
  --segStep: 5;
}

.segment:nth-child(7) {
  --segStep: 6;
}

.segment:nth-child(8) {
  --segStep: 7;
}

.segment:nth-child(9) {
  --segStep: 8;
}

.segment:nth-child(10) {
  --segStep: 9;
}

.segment:nth-child(11) {
  --segStep: 10;
}

.segment:nth-child(12) {
  --segStep: 11;
}

.segment:nth-child(13) {
  --segStep: 12;
}

.segment:nth-child(14) {
  --segStep: 13;
}

.segment:nth-child(15) {
  --segStep: 14;
}

.segment:nth-child(16) {
  --segStep: 15;
}

.segment:nth-child(17) {
  --segStep: 16;
}

.segment:nth-child(18) {
  --segStep: 17;
}

.segment:nth-child(19) {
  --segStep: 18;
}

.segment:nth-child(20) {
  --segStep: 19;
}

.segment:nth-child(21) {
  --segStep: 20;
}

.segment:nth-child(22) {
  --segStep: 21;
}

.segment:nth-child(23) {
  --segStep: 22;
}

.segment:nth-child(24) {
  --segStep: 23;
}

.segment:nth-child(25) {
  --segStep: 24;
}

.segment:nth-child(26) {
  --segStep: 25;
}

.segment:nth-child(27) {
  --segStep: 26;
}

.segment:nth-child(28) {
  --segStep: 27;
}

.segment:nth-child(29) {
  --segStep: 28;
}

.segment:nth-child(30) {
  --segStep: 29;
}

.segment:nth-child(31) {
  --segStep: 30;
}

.segment:nth-child(32) {
  --segStep: 31;
}

#d10:checked ~ .scene .segment {
  --HVratio: .1; /* defines how thick the torus's body is - at 1/4 it's a fourth of its diameter; try 1/3 for a more donuty shape, or 1/10 for a bracelet */
}

#d25:checked ~ .scene .segment {
  --HVratio: .25; /* defines how thick the torus's body is - at 1/4 it's a fourth of its diameter; try 1/3 for a more donuty shape, or 1/10 for a bracelet */
}

#d33:checked ~ .scene .segment {
  --HVratio: calc(1/3); /* defines how thick the torus's body is - at 1/4 it's a fourth of its diameter; try 1/3 for a more donuty shape, or 1/10 for a bracelet */
}

#d50:checked ~ .scene .segment {
  --HVratio: .5; /* defines how thick the torus's body is - at 1/4 it's a fourth of its diameter; try 1/3 for a more donuty shape, or 1/10 for a bracelet */
}

#d66:checked ~ .scene .segment {
  --HVratio: calc(2/3); /* defines how thick the torus's body is - at 1/4 it's a fourth of its diameter; try 1/3 for a more donuty shape, or 1/10 for a bracelet */
}

.facet {
  width: calc(sin(calc(var(--angle)/2))*100em);
  aspect-ratio: calc(1/var(--HVratio));
  background-image: linear-gradient(hsl(calc(var(--facetStep)*var(--angle)*2) 100% 50%), hsl(calc((var(--facetStep) - 1)*var(--angle)*2) 100% 50%));
  opacity: .5;
  filter: hue-rotate(calc(var(--angle)*var(--segStep)));
  transform: rotateY(90deg) rotateX(calc(var(--facetStep)*var(--angle) - (90deg - var(--angle)/2))) translateZ(calc(cos(calc(var(--angle)/2))*50em*var(--HVratio)));
  clip-path: polygon(
    calc(50%*var(--HVratio) - sin(var(--angle)*var(--facetStep))*50%*var(--HVratio)) 101%,
    calc(50%*(2 - var(--HVratio)) + sin(var(--angle)*var(--facetStep))*50%*var(--HVratio)) 101%,
    calc(50%*(2 - var(--HVratio)) + sin(var(--angle)*(var(--facetStep) + 1))*50%*var(--HVratio)) -1%,
    calc(50%*var(--HVratio) - sin(var(--angle)*(var(--facetStep) + 1))*50%*var(--HVratio)) -1% );
}

.facet:nth-child(1) {
  --facetStep: 0;
}

.facet:nth-child(2) {
  --facetStep: 1;
}

.facet:nth-child(3) {
  --facetStep: 2;
}

.facet:nth-child(4) {
  --facetStep: 3;
}

.facet:nth-child(5) {
  --facetStep: 4;
}

.facet:nth-child(6) {
  --facetStep: 5;
}

.facet:nth-child(7) {
  --facetStep: 6;
}

.facet:nth-child(8) {
  --facetStep: 7;
}

.facet:nth-child(9) {
  --facetStep: 8;
}

.facet:nth-child(10) {
  --facetStep: 9;
}

.facet:nth-child(11) {
  --facetStep: 10;
}

.facet:nth-child(12) {
  --facetStep: 11;
}

.facet:nth-child(13) {
  --facetStep: 12;
}

.facet:nth-child(14) {
  --facetStep: 13;
}

.facet:nth-child(15) {
  --facetStep: 14;
}

.facet:nth-child(16) {
  --facetStep: 15;
}

.facet:nth-child(17) {
  --facetStep: 16;
}

.facet:nth-child(18) {
  --facetStep: 17;
}

.facet:nth-child(19) {
  --facetStep: 18;
}

.facet:nth-child(20) {
  --facetStep: 19;
}

.facet:nth-child(21) {
  --facetStep: 20;
}

.facet:nth-child(22) {
  --facetStep: 21;
}

.facet:nth-child(23) {
  --facetStep: 22;
}

.facet:nth-child(24) {
  --facetStep: 23;
}

.facet:nth-child(25) {
  --facetStep: 24;
}

.facet:nth-child(26) {
  --facetStep: 25;
}

.facet:nth-child(27) {
  --facetStep: 26;
}

.facet:nth-child(28) {
  --facetStep: 27;
}

.facet:nth-child(29) {
  --facetStep: 28;
}

.facet:nth-child(30) {
  --facetStep: 29;
}

.facet:nth-child(31) {
  --facetStep: 30;
}

.facet:nth-child(32) {
  --facetStep: 31;
}

@keyframes spin {
  0% {
    transform: rotateY(1deg)
  }
  100% {
    transform: rotateY(361deg);
  }
}

@keyframes roll {
  100% {
    rotate: x 360deg;
  }
}


/* NAVIGATION / UI */

nav {
  width: min(100vw, 140vh);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  aspect-ratio: 1;
  --rainbow: conic-gradient(#f0f,#ff0,#0ff);
  /* background-image: radial-gradient(transparent 0 50em, #333 50em 75em, transparent 75em), var(--rainbow); */
  border-radius: 50%;
}

fieldset {
  margin: 0;
  padding: 0;
  position: relative;
  border: none;
}

fieldset span {
  font-family: Arial;
  font-size: 10em;
}

p, label {
  margin: 0;
  inset: 0;
  display: flex;
  align-items: center;
}

p {
  --pRotate: -8.5deg;
}

label {
  --labelRotate: -10.5deg;
}

span {
  text-align: center;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

p span {
  color: #333;
  width: 1em;
  --gradAngle: 0;
}

:is(p,label):nth-of-type(1) {
  --nth: 1;
}

:is(p,label):nth-of-type(2) {
  --nth: 2;
}

:is(p,label):nth-of-type(3) {
  --nth: 3;
}

:is(p,label):nth-of-type(4) {
  --nth: 4;
}

:is(p,label):nth-of-type(5) {
  --nth: 5;
}

:is(p,label):nth-of-type(6) {
  --nth: 6;
}

:is(p,label):nth-of-type(7) {
  --nth: 7;
}

:is(p,label):nth-of-type(8) {
  --nth: 8;
}

#sides :is(p, label) {
  transform-origin: 100% 50%;
}

#sides p {
  rotate: calc((var(--nth) - 4.5)*var(--pRotate));
}

#sides label {
  rotate: calc((var(--nth) - 4)*var(--labelRotate));
}

#sides p span {
  background-image: linear-gradient(var(--gradAngle),#f0f,#ff0,#0ff);
  background-size: 800% 800%;
  background-position-x: calc(800% - (var(--nth) - 1)*100%);
  background-position-y: calc(800% - (var(--nth) - 1)*100%);
}

#sides label span {
  color: hsl(calc((var(--nth) - 1) * 360deg/7) 100% 50%);
  filter: hue-rotate(120deg);
}

#thickness :is(p,label) {
  transform-origin: 0 50%;
}

#thickness p {
  rotate: calc((var(--nth) - 3)*var(--pRotate)*-1);
}

#thickness label {
  rotate: calc((var(--nth) - 3)*var(--labelRotate)*-1);
}

#thickness span {
  right: 0;
}

#thickness p span {
  background-image: linear-gradient(var(--gradAngle),#f00,#06f,#0f0);
  background-size: 500% 500%;
  background-position-x: calc(500% - (var(--nth) - 1)*100%);
  background-position-y: calc(500% - (var(--nth) - 1)*100%);
}

#thickness label span {
  color: hsl(calc((var(--nth) - 1) * 360deg/5) 100% 50%);
  filter: hue-rotate(-60deg);
}

label span {
  margin-inline: 1.5em;
  line-height: 1em;
}

#thickness label span {
  margin-inline: 1.5em;
}

#x3:checked ~ nav #l3 span,
#x4:checked ~ nav #l4 span,
#x5:checked ~ nav #l5 span,
#x6:checked ~ nav #l6 span,
#x8:checked ~ nav #l8 span,
#x16:checked ~ nav #l16 span,
#x32:checked ~ nav #l32 span,
#d10:checked ~ nav #l10 span,
#d25:checked ~ nav #l25 span,
#d33:checked ~ nav #l33 span,
#d50:checked ~ nav #l50 span,
#d66:checked ~ nav #l66 span {
  font-weight: bolder;
  text-shadow: 0 0 .1em yellow, 0 0 .2em lime, 0 0 .3em cyan, 0 0 .5em blue; 
  color: #fff;
}


/* MEDIA QUERIES */


@media (orientation: portrait) {
  body {
    flex-direction: column;
  }

  .scene {
    font-size: .6vw;
  }
  
  nav {
    font-size: .3em;
    rotate: -90deg;
    width: min(100vh,140vw);
  }

  fieldset span {
    rotate: 90deg;
    font-size: max(10vw,5vh);
    letter-spacing: -5px;
  }

  p {
    --pRotate: -11deg;
  }

  p span {
    --gradAngle: 90deg;
  }

  label {
    margin-inline: 2em;
    --labelRotate: -17deg;
  }

}

/* You can modify the segmentation of the torus and the shape of its cross-section with the SEGMENTS menu, and the thickness of the torus with the GIRTH. The one glowing off-white is the currently selected option.
FAIR WARNING: 32 segments is a real GPU/CPU hog so careful there. */

This Pen is owned by Fitz on CodePen.

See more by @MackFitz on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.