AT&T - ring diagram

by Grzegorz Matyszewski

HTML

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="212" height="212" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 212 212">
  <defs>
    <linearGradient id="linear-gradient" x1="-20" y1="85" x2="190" y2="90" gradientUnits="userSpaceOnUse">
      <stop offset=".8" stop-color="#fbffab"/>
      <stop offset="1" stop-color="#fff"/>
    </linearGradient>
  </defs>
  <path d="M106,1C48,1,1,48,1,106s47,105,105,105,105-47,105-105S164,1,106,1ZM106,186.8c-44.6,0-80.8-36.2-80.8-80.8S61.4,25.2,106,25.2s80.8,36.2,80.8,80.8-36.2,80.8-80.8,80.8Z" fill="#fff" fill-opacity="0.07" stroke-opacity="0.6" stroke="#fff" stroke-miterlimit="10" stroke-width=".5"/>
  <circle cx="106" cy="106" r="93" fill="none" stroke="url(#linear-gradient)" stroke-miterlimit="10" stroke-width="24"/>
</svg>

CSS

body { background: #0F25FF; }
svg circle:last-child { stroke-dasharray: 585px; stroke-dashoffset: 585px; transition: stroke-dashoffset 0.6s ease-out, rotate 0.6s ease-out;  transform-origin: 106px 106px; }
svg:hover circle:last-child { stroke-dashoffset: 0; rotate: 180deg; }