lighthouse.svg


	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" width="1000" height="200">
		<style>
			.gauge-base {
				opacity: 0.1
			}
			.gauge-arc {
				fill: none;
				animation-delay: 250ms;
				stroke-linecap: round;
				transform: rotate(-90deg);
				transform-origin: 100px 60px;
				animation: load-gauge 1s ease forwards
			}
			.guage-text {
				font-size: 40px;
				font-family: monospace;
				text-align: center
			}
			.red {
				color: #ff4e42;
				fill: #ff4e42;
				stroke: #ff4e42
			}
			.orange {
				color: #ffa400;
				fill: #ffa400;
				stroke: #ffa400
			}
			.green {
				color: #0cce6b;
				fill: #0cce6b;
				stroke: #0cce6b
			}
			.undefined {
				color: #1e1e1e;
				fill: #1e1e1e;
				stroke: #1e1e1e
			}
			.guage-title {
				stroke: none;
				font-size: 26px;
				line-height: 26px;
				font-family: Roboto, Halvetica, Arial, sans-serif
			}
			.metric.guage-title {
				font-family: 'Courier New', Courier, monospace
			}
			.guage-title {
				color: #539bf5;
				fill: #539bf5
			}
			@keyframes load-gauge {
				from {
					stroke-dasharray: 0 352.858
				}
			}
			#cont {
				stroke: #00000022
			}
		</style>
        <g class="green" transform="translate(100,0) ">
          <circle class="gauge-base" r="56" cx="100" cy="60" stroke-width="8"></circle>
          <circle class="gauge-arc guage-arc-1" r="56" cx="100" cy="60" stroke-width="8" style="stroke-dasharray: 351.858, 351.858;"></circle>
          <text class="guage-text" x="100px" y="60px" alignment-baseline="central" dominant-baseline="central" text-anchor="middle">100</text>
          <text class="guage-title" x="100px" y="160px" alignment-baseline="central" dominant-baseline="central" text-anchor="middle">performance</text>
      </g>
      <g class="green" transform="translate(300,0) ">
          <circle class="gauge-base" r="56" cx="100" cy="60" stroke-width="8"></circle>
          <circle class="gauge-arc guage-arc-1" r="56" cx="100" cy="60" stroke-width="8" style="stroke-dasharray: 351.858, 351.858;"></circle>
          <text class="guage-text" x="100px" y="60px" alignment-baseline="central" dominant-baseline="central" text-anchor="middle">100</text>
          <text class="guage-title" x="100px" y="160px" alignment-baseline="central" dominant-baseline="central" text-anchor="middle">accessibility</text>
      </g>
      <g class="green" transform="translate(500,0) ">
          <circle class="gauge-base" r="56" cx="100" cy="60" stroke-width="8"></circle>
          <circle class="gauge-arc guage-arc-1" r="56" cx="100" cy="60" stroke-width="8" style="stroke-dasharray: 351.858, 351.858;"></circle>
          <text class="guage-text" x="100px" y="60px" alignment-baseline="central" dominant-baseline="central" text-anchor="middle">100</text>
          <text class="guage-title" x="100px" y="160px" alignment-baseline="central" dominant-baseline="central" text-anchor="middle">best-practices</text>
      </g>
      <g class="green" transform="translate(700,0) ">
          <circle class="gauge-base" r="56" cx="100" cy="60" stroke-width="8"></circle>
          <circle class="gauge-arc guage-arc-1" r="56" cx="100" cy="60" stroke-width="8" style="stroke-dasharray: 351.858, 351.858;"></circle>
          <text class="guage-text" x="100px" y="60px" alignment-baseline="central" dominant-baseline="central" text-anchor="middle">100</text>
          <text class="guage-title" x="100px" y="160px" alignment-baseline="central" dominant-baseline="central" text-anchor="middle">seo</text>
      </g>
      
	</svg>