docs/img/desktop.svg

<svg width="1000" height="330" fill="none" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><!-- PageSpeed Insights for http://example.com/ --><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;
}
.guage-red {
  color: #ff4e42;
  fill: #ff4e42;
  stroke: #ff4e42;
}
.guage-orange {
  color: #ffa400;
  fill: #ffa400;
  stroke: #ffa400;
}
.guage-green {
  color: #0cce6b;
  fill: #0cce6b;
  stroke: #0cce6b;
}
.guage-undefined {
  color: #5c5c5c;
  fill: #5c5c5c;
  stroke: #5c5c5c;
}
.guage-title {
  stroke: none;
  font-size: 26px;
  line-height: 26px;
  font-family: Roboto, Halvetica, Arial, sans-serif;
  color: #737373;
  fill: #737373;
}
.metric.guage-title {
  font-family: "Courier New", Courier, monospace;
}
@keyframes load-gauge {
  from {
    stroke-dasharray: 0 352.858;
  }
}
.lh-gauge--pwa__disc {
  fill: #e0e0e0;
}
.lh-gauge--pwa__logo {
  position: relative;
  fill: #b0b0b0;
}
.lh-gauge--pwa__invisible {
  display: none;
}
.lh-gauge--pwa__visible {
  display: inline;
}
.guage-invisible {
  display: none;
}
.lh-gauge--pwa__logo--primary-color {
  fill: #304ffe;
}
.lh-gauge--pwa__logo--secondary-color {
  fill: #3d3d3d;
}
#svg_2 {
  stroke: #616161;
}
</style><svg class="guage-div guage-perf guage-green" viewBox="0 0 200 200" width="200" height="200" y="0" x="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" id="score-circle" stroke-dasharray="351.858"></circle>
    <text class="guage-text" x="100px" y="60px" alignment-baseline="central" dominant-baseline="central" text-anchor="middle" id="score">100</text>
    <text class="guage-title" x="100px" y="160px" alignment-baseline="central" dominant-baseline="central" text-anchor="middle" id="category">Performance</text>
</svg><svg class="guage-div guage-perf guage-orange" viewBox="0 0 200 200" width="200" height="200" y="0" x="200">
    <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" id="score-circle" stroke-dasharray="302.59788000000003"></circle>
    <text class="guage-text" x="100px" y="60px" alignment-baseline="central" dominant-baseline="central" text-anchor="middle" id="score">86</text>
    <text class="guage-title" x="100px" y="160px" alignment-baseline="central" dominant-baseline="central" text-anchor="middle" id="category">Accessibility</text>
</svg><svg class="guage-div guage-perf guage-orange" viewBox="0 0 200 200" width="200" height="200" y="0" x="400">
    <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" id="score-circle" stroke-dasharray="270.93066"></circle>
    <text class="guage-text" x="100px" y="60px" alignment-baseline="central" dominant-baseline="central" text-anchor="middle" id="score">77</text>
    <text class="guage-title" x="100px" y="160px" alignment-baseline="central" dominant-baseline="central" text-anchor="middle" id="category">Best Practices</text>
</svg><svg class="guage-div guage-perf guage-orange" viewBox="0 0 200 200" width="200" height="200" y="0" x="600">
    <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" id="score-circle" stroke-dasharray="313.15362"></circle>
    <text class="guage-text" x="100px" y="60px" alignment-baseline="central" dominant-baseline="central" text-anchor="middle" id="score">89</text>
    <text class="guage-title" x="100px" y="160px" alignment-baseline="central" dominant-baseline="central" text-anchor="middle" id="category">SEO</text>
</svg><svg class="guage-div guage-pwa" viewBox="0 0 200 200" width="200" height="200" x="800" y="0">
	<svg viewBox="0 0 60 60" width="112" height="112" x="44" y="4">
		<defs>
			<linearGradient id="lh-gauge--pwa__check-circle__gradient-0" x1="50%" y1="0%" x2="50%" y2="100%">
				<stop stop-color="#00C852" offset="0%"></stop>
				<stop stop-color="#009688" offset="100%"></stop>
			</linearGradient>
			<linearGradient id="lh-gauge--pwa__installable__shadow-gradient-0" x1="76.056%" x2="24.111%" y1="82.995%" y2="24.735%">
				<stop stop-color="#A5D6A7" offset="0%"></stop>
				<stop stop-color="#80CBC4" offset="100%"></stop>
			</linearGradient>
			<linearGradient id="lh-gauge--pwa__fast-reliable__shadow-gradient-0" x1="76.056%" y1="82.995%" x2="25.678%" y2="26.493%">
				<stop stop-color="#64B5F6" offset="0%"></stop>
				<stop stop-color="#2979FF" offset="100%"></stop>
			</linearGradient>

			<g id="lh-gauge--pwa__fast-reliable-badge-0">
				<circle fill="#FFFFFF" cx="10" cy="10" r="10"></circle>
				<path fill="#304FFE" d="M10 3.58l5.25 2.34v3.5c0 3.23-2.24 6.26-5.25 7-3.01-.74-5.25-3.77-5.25-7v-3.5L10 3.58zm-.47 10.74l2.76-4.83.03-.07c.04-.08 0-.24-.22-.24h-1.64l.47-3.26h-.47l-2.7 4.77c-.02.01.05-.1-.04.05-.09.16-.1.31.18.31h1.63l-.47 3.27h.47z"></path>
			</g>
			<g id="lh-gauge--pwa__installable-badge-0">
				<circle fill="#FFFFFF" cx="10" cy="10" r="10"></circle>
				<path fill="#009688" d="M10 4.167A5.835 5.835 0 0 0 4.167 10 5.835 5.835 0 0 0 10 15.833 5.835 5.835 0 0 0 15.833 10 5.835 5.835 0 0 0 10 4.167zm2.917 6.416h-2.334v2.334H9.417v-2.334H7.083V9.417h2.334V7.083h1.166v2.334h2.334v1.166z"></path>
			</g>
		</defs>
		<g stroke="none" fill-rule="nonzero">
			<!-- Background and PWA logo -->
			<circle class="lh-gauge--pwa__disc" cx="30" cy="30" r="30"></circle>
			<g class="lh-gauge--pwa__logo">
				<path d="M35.66 19.39l.7-1.75h2L37.4 15 38.6 12l3.4 9h-2.51l-.58-1.61z"></path>
				<path d="M33.52 21l3.65-9h-2.42l-2.5 5.82L30.5 12h-1.86l-1.9 5.82-1.35-2.65-1.21 3.72L25.4 21h2.38l1.72-5.2 1.64 5.2z"></path>
				<path fill-rule="nonzero" d="M20.3 17.91h1.48c.45 0 .85-.05 1.2-.15l.39-1.18 1.07-3.3a2.64 2.64 0 0 0-.28-.37c-.55-.6-1.36-.91-2.42-.91H18v9h2.3V17.9zm1.96-3.84c.22.22.33.5.33.87 0 .36-.1.65-.29.87-.2.23-.59.35-1.15.35h-.86v-2.41h.87c.52 0 .89.1 1.1.32z"></path>
			</g>
			<!-- fast & reliable obj -->
			<g class="lh-gauge--pwa__component lh-gauge--pwa__fast-reliable-badge" transform="translate(20, 29)">
				<path fill="url(#lh-gauge--pwa__fast-reliable__shadow-gradient-0)" d="M33.63 19.49A30 30 0 0 1 16.2 30.36L3 17.14 17.14 3l16.49 16.49z"></path>
				<use href="#lh-gauge--pwa__fast-reliable-badge-0"></use>
			</g>
		</g>
	</svg>
	<text class="guage-title" y="160px" alignment-baseline="central" dominant-baseline="central" text-anchor="middle">
		<tspan x="100px" dy="-6px">Progressive</tspan>
		<tspan x="100px" dy="30px">Web App</tspan>
	</text>
</svg><svg width="604" height="76" x="200" y="250" id="legend">
    <g>
        <rect fill="none" id="canvas_background" height="80" width="604" y="-1" x="-1"></rect>
        <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
            <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"></rect>
        </g>
    </g>
    <g>
        <rect fill-opacity="0" stroke-width="2" rx="40" id="svg_2" height="72" width="600" y="1" x="0" fill="#000000"></rect>
        <rect stroke="#000" rx="8" id="svg_3" height="14" width="48" y="30" x="35" stroke-opacity="null" stroke-width="0" fill="#ff4e42"></rect>
        <rect stroke="#000" rx="6" id="svg_4" height="14" width="48" y="30" x="220" stroke-opacity="null" stroke-width="0" fill="#ffa400"></rect>
        <rect stroke="#000" rx="6" id="svg_5" height="14" width="48" y="30" x="410" stroke-opacity="null" stroke-width="0" fill="#0cce6b"></rect>
        <text class="metric guage-title" xml:space="preserve" text-anchor="start" font-size="26" id="svg_6" y="45" x="100" stroke-opacity="null" stroke-width="0" stroke="#000">0-49</text>
        <text class="metric guage-title" xml:space="preserve" text-anchor="start" font-size="26" id="svg_7" y="45" x="280" stroke-opacity="null" stroke-width="0" stroke="#000">50-89</text>
        <text class="metric guage-title" xml:space="preserve" text-anchor="start" font-size="26" id="svg_8" y="45" x="470" stroke-opacity="null" stroke-width="0" stroke="#000">90-100</text>
    </g>
</svg></svg>