Prototype Speedtest Dial (SVG)

index.html

<!-- SVG Speedclock. Begin. -->
<svg xmlns="http://www.w3.org/2000/svg" width="236" height="244" viewBox="0 0 236 244">
    <defs>
      <radialGradient id="a" cx="58.61%" r="31.426%" fx="58.61%" fy="50%">
        <stop stop-color="#46CDEB" offset="0%"/>
        <stop stop-color="#46CDEB" stop-opacity="0" offset="86.402%"/>
      </radialGradient>
      <radialGradient id="b" cx="58.61%" r="27.153%" fx="58.61%" fy="50%">
        <stop stop-color="#A5D22D" offset="0%"/>
        <stop stop-color="#A5D22D" stop-opacity="0" offset="100%"/>
      </radialGradient>
      <radialGradient id="c" cx="58.61%" r="27.153%" fx="58.61%" fy="50%">
        <stop stop-color="#782D9B" offset="0%"/>
        <stop stop-color="#782D9B" stop-opacity="0" offset="100%"/>
      </radialGradient>
      <radialGradient id="d" cx="58.61%" r="27.153%" fx="58.61%" fy="50%">
        <stop stop-color="#C30828" offset="0%"/>
        <stop stop-color="#C30828" stop-opacity="0" offset="100%"/>
      </radialGradient>
      <linearGradient id="gradient-gauge" x1="0%" y1="100%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgb(70,205,235);stop-opacity:0" />
        <stop offset="50%" style="stop-color:rgb(165,210,45);stop-opacity:.6" />
        <stop offset="100%" style="stop-color:rgb(165,210,45);stop-opacity:1" />
      </linearGradient>
    </defs>
    <g fill="none" fill-rule="evenodd">
      <!-- Multiple stacked "mix-blend-mode:soft-light" exported from Sketch are buggy, use fill-opacity instead. -->
      <circle cx="135" cy="94" r="154" fill="url(#a)" fill-opacity=".2"  />
      <circle cx="76" cy="84" r="154" fill="url(#b)" fill-opacity=".2"  />
      <circle cx="126" cy="94" r="154" fill="url(#b)" fill-opacity=".2"  />
      <circle cx="96" cy="160" r="154" fill="url(#c)" fill-opacity=".5"  />
      <circle cx="57" cy="158" r="154" fill="url(#d)" fill-opacity=".5"  />
      <circle cx="123" cy="123" r="78" fill="#FFF" fill-opacity=".1"/>
      <circle cx="123" cy="123" r="89" stroke="#FFF" stroke-opacity=".05" stroke-width="6"/>
      <g fill-rule="nonzero">
        <path fill="#FFF" d="M183.7 98.67c-.02-.11-.055-.217-.1-.32-.024-.048-.05-.095-.08-.14-3.18-7.603-7.767-14.538-13.52-20.44-.05-.13-.15-.235-.28-.29-12.24-12.43-28.956-19.427-46.4-19.42h-.64c-8.573.073-17.046 1.844-24.93 5.21l-.2.06c-.088.04-.17.085-.25.14-7.613 3.333-14.523 8.084-20.36 14-.134.056-.238.165-.29.3-5.66 5.782-10.2 12.563-13.39 20l-.05.09c-.05.102-.086.21-.11.32-3.322 7.968-5.022 16.518-5 25.15-.078 17.31 6.766 33.933 19.01 46.17.29.273.672.43 1.07.44.4-.003.78-.165 1.06-.45l9-9.15c.397-.378.556-.942.415-1.472-.14-.53-.56-.94-1.09-1.07-.533-.132-1.095.038-1.465.442l-7.88 8c-4.874-5.102-8.844-10.996-11.74-17.43l10.1-4.81c.748-.356 1.066-1.252.71-2-.356-.748-1.252-1.066-2-.71l-10 4.8c-2.668-6.787-4.12-13.99-4.29-21.28l11.31-.25c.828 0 1.5-.672 1.5-1.5s-.672-1.5-1.5-1.5l-11.31.25c.172-7.252 1.617-14.418 4.27-21.17l10 5c.48.35 1.12.386 1.636.09.515-.298.805-.87.74-1.462-.063-.59-.47-1.088-1.036-1.268l-10.15-5.11c2.823-6.28 6.665-12.052 11.37-17.08l7.84 7.92c.588.554 1.51.542 2.084-.027.574-.568.594-1.49.046-2.083l-7.87-8c5.082-4.934 10.966-8.968 17.4-11.93l4.58 10.54c.33.76 1.216 1.106 1.975.775.76-.33 1.106-1.216.775-1.975l-4.57-10.53c6.75-2.715 13.927-4.218 21.2-4.44v11.79c0 .828.672 1.5 1.5 1.5s1.5-.672 1.5-1.5V61.08c7.435.11 14.79 1.56 21.71 4.28L140.85 76c-.232.484-.19 1.055.115 1.498.303.444.82.69 1.355.65.535-.04 1.008-.364 1.24-.848l5.18-10.8c6.595 2.972 12.625 7.066 17.82 12.1l-8.54 8c-.48.332-.725.912-.626 1.488.098.575.522 1.04 1.085 1.194.56.153 1.16-.035 1.54-.482l8.61-8c4.81 5.127 8.73 11.03 11.58 17.46l-10.45 4.72c-.53.197-.89.668-.96 1.222-.07.554.18 1.1.64 1.416.46.317 1.05.352 1.55.092l10.4-4.71c2.56 6.657 3.95 13.708 4.12 20.84h-11.85c-.83 0-1.5.672-1.5 1.5s.67 1.5 1.5 1.5h11.85c-.16 7.353-1.62 14.62-4.32 21.46l-10.87-5.46c-.48-.24-1.05-.21-1.5.085-.45.294-.71.805-.68 1.34.03.536.343 1.014.822 1.255l11 5.55c-2.995 6.59-7.117 12.608-12.18 17.78l-8.51-8.51c-.59-.55-1.513-.534-2.084.037-.57.57-.588 1.492-.037 2.083l9.57 9.57c.584.578 1.526.578 2.11 0 19.004-18.554 24.86-46.776 14.81-71.36h.05z"/>
        <!-- Colored gauge needs to be inserted by hand, does not get exported from Sketch. -->
        <path transform="translate(70 70)" fill="url(#gradient-gauge)" d="M16.24 92.604C2.385 79.05-3.144 59.107 1.756 40.35 6.656 21.596 21.233 6.907 39.95 1.862c18.716-5.045 38.7.33 52.362 14.082 2.534 2.535 3.522 6.228 2.594 9.69-.93 3.46-3.634 6.163-7.095 7.09-3.46.926-7.15-.065-9.69-2.6-8.62-8.557-21.15-11.864-32.87-8.674C33.53 24.64 24.4 33.84 21.3 45.585c-3.1 11.746.304 24.252 8.927 32.81 2.894 2.844 3.78 7.155 2.246 10.912-1.536 3.756-5.188 6.212-9.246 6.217-2.598-.053-5.11-1.084-6.98-2.92z"/>

        <path fill="#FFF" d="M137.64 168.6h-29.05c-1.795-.015-3.52.704-4.772 1.99-1.253 1.285-1.928 3.026-1.868 4.82 0 5.85 4.32 7.57 6.66 7.67h28.8c3.688-.308 6.455-3.506 6.23-7.2 0-5.36-3.92-7.11-6-7.28zm-.24 11.47h-28.71c-.62 0-3.74-.44-3.74-4.67-.062-1.005.3-1.99 1-2.715.7-.725 1.673-1.122 2.68-1.095h28.8c.66.08 3.21.65 3.21 4.27 0 3.91-3.24 4.2-3.23 4.21h-.01z"/>
        <path d="M85.12 161.48c-13.857-13.555-19.386-33.497-14.486-52.253 4.9-18.755 19.476-33.444 38.193-38.49 18.717-5.044 38.7.33 52.363 14.083 2.533 2.535 3.52 6.228 2.593 9.69-.93 3.46-3.634 6.163-7.095 7.09-3.462.926-7.155-.065-9.688-2.6-8.623-8.557-21.155-11.863-32.877-8.674-11.72 3.19-20.85 12.39-23.95 24.135-3.098 11.75.304 24.26 8.927 32.81 2.893 2.85 3.78 7.16 2.245 10.92-1.535 3.757-5.187 6.21-9.245 6.218-2.6-.052-5.113-1.083-6.98-2.92z"/>
        
        <!-- The red pointer is rotated through SVG transform attribute. -->
        <path id="pointer-1" 
              transform="rotate(-90,125,125)" 
              d="M122.15 132.28c-1.98-.033-3.87-.832-5.27-2.23-1.606-1.376-2.557-3.366-2.62-5.48.067-2.255.99-4.4 2.58-6l.18-.16L146.13 95c2.35-1.86 4.24-2.19 5.64-1 .085.074.166.155.24.24.6.68 1.69 2.58-1 5.61l-22.51 29.32-.1.12c-1.518 1.703-3.62 2.774-5.89 3l-.36-.01zm-1.88-10.05c-.583.632-.935 1.443-1 2.3.046.736.41 1.415 1 1.86.487.564 1.195.89 1.94.89.92-.14 1.764-.59 2.39-1.28l14.7-19.13-19.03 15.36z"/>

        <!-- The yellow pointer has an animated rotation through CSS. -->
        <path id="pointer-2" 
              d="M122.15 132.28c-1.98-.033-3.87-.832-5.27-2.23-1.606-1.376-2.557-3.366-2.62-5.48.067-2.255.99-4.4 2.58-6l.18-.16L146.13 95c2.35-1.86 4.24-2.19 5.64-1 .085.074.166.155.24.24.6.68 1.69 2.58-1 5.61l-22.51 29.32-.1.12c-1.518 1.703-3.62 2.774-5.89 3l-.36-.01zm-1.88-10.05c-.583.632-.935 1.443-1 2.3.046.736.41 1.415 1 1.86.487.564 1.195.89 1.94.89.92-.14 1.764-.59 2.39-1.28l14.7-19.13-19.03 15.36z"/> 
      </g>
    </g>
  </svg>
<!-- SVG Speedclock. End. -->

prototype-speedtest-dial-svg.markdown

Prototype Speedtest Dial (SVG)

SVG clock dial with rotating hand.

A Pen by Oliver Schafeld on CodePen.

License.

style.css

body {
  background-image: linear-gradient(to top, #3f79ab, #1d4f8f 100%);
}

#pointer-1 {
  fill: red;
}
#pointer-2 {
  fill: yellow;
}

#pointer-2 {
  transform-origin: 23% 81%;
  animation: 4s dialspin infinite linear;
}

@keyframes dialspin  {
  0% {transform: rotate(0deg)}
  100% { transform: rotate(360deg) }
}

CodePen: https://codepen.io/schafeld/pen/GmMGOM?editors=1100