docs/svg/psi.svg

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="330" fill="none"><style>@keyframes load-gauge{0%{stroke-dasharray:0 352.858}}.gauge-base{opacity:.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-green{color:#0cce6b;fill:#0cce6b;stroke:#0cce6b}.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:&quot;Courier New&quot;,Courier,monospace}</style><svg width="200" height="200" class="guage-div guage-perf guage-green" viewBox="0 0 200 200"><circle cx="100" cy="60" r="56" stroke-width="8" class="gauge-base"/><circle id="score-circle" cx="100" cy="60" r="56" stroke-dasharray="348.339" stroke-width="8" class="gauge-arc guage-arc-1"/><text id="score" x="100" y="60" alignment-baseline="central" class="guage-text" dominant-baseline="central" text-anchor="middle">99</text><text id="category" x="100" y="160" alignment-baseline="central" class="guage-title" dominant-baseline="central" text-anchor="middle">Performance</text></svg><svg width="200" height="200" x="200" class="guage-div guage-perf guage-green" viewBox="0 0 200 200"><circle cx="100" cy="60" r="56" stroke-width="8" class="gauge-base"/><circle cx="100" cy="60" r="56" stroke-dasharray="327.228" stroke-width="8" class="gauge-arc guage-arc-1"/><text x="100" y="60" alignment-baseline="central" class="guage-text" dominant-baseline="central" text-anchor="middle">93</text><text x="100" y="160" alignment-baseline="central" class="guage-title" dominant-baseline="central" text-anchor="middle">Accessibility</text></svg><svg width="200" height="200" x="400" class="guage-div guage-perf guage-green" viewBox="0 0 200 200"><circle cx="100" cy="60" r="56" stroke-width="8" class="gauge-base"/><circle cx="100" cy="60" r="56" stroke-dasharray="351.858" stroke-width="8" class="gauge-arc guage-arc-1"/><text x="100" y="60" alignment-baseline="central" class="guage-text" dominant-baseline="central" text-anchor="middle">100</text><text x="100" y="160" alignment-baseline="central" class="guage-title" dominant-baseline="central" text-anchor="middle">Best Practices</text></svg><svg width="200" height="200" x="600" class="guage-div guage-perf guage-green" viewBox="0 0 200 200"><circle cx="100" cy="60" r="56" stroke-width="8" class="gauge-base"/><circle cx="100" cy="60" r="56" stroke-dasharray="351.858" stroke-width="8" class="gauge-arc guage-arc-1"/><text x="100" y="60" alignment-baseline="central" class="guage-text" dominant-baseline="central" text-anchor="middle">100</text><text x="100" y="160" alignment-baseline="central" class="guage-title" dominant-baseline="central" text-anchor="middle">SEO</text></svg><svg width="200" height="200" x="800" class="guage-div guage-pwa" viewBox="0 0 200 200"><svg width="112" height="112" x="44" y="4" viewBox="0 0 60 60"><defs><linearGradient id="lh-gauge--pwa__check-circle__gradient-0" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#00C852"/><stop offset="100%" stop-color="#009688"/></linearGradient><linearGradient id="lh-gauge--pwa__installable__shadow-gradient-0" x1="76.056%" x2="24.111%" y1="82.995%" y2="24.735%"><stop offset="0%" stop-color="#A5D6A7"/><stop offset="100%" stop-color="#80CBC4"/></linearGradient><linearGradient id="lh-gauge--pwa__fast-reliable__shadow-gradient-0" x1="76.056%" x2="25.678%" y1="82.995%" y2="26.493%"><stop offset="0%" stop-color="#64B5F6"/><stop offset="100%" stop-color="#2979FF"/></linearGradient><g id="lh-gauge--pwa__fast-reliable-badge-0"><circle cx="10" cy="10" r="10" fill="#FFF"/><path fill="#304FFE" d="m10 3.58 5.25 2.34v3.5c0 3.23-2.24 6.26-5.25 7-3.01-.74-5.25-3.77-5.25-7v-3.5zm-.47 10.74 2.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.27z"/></g><g id="lh-gauge--pwa__installable-badge-0"><circle cx="10" cy="10" r="10" fill="#FFF"/><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.167m2.917 6.416h-2.334v2.334H9.417v-2.334H7.083V9.417h2.334V7.083h1.166v2.334h2.334z"/></g></defs><circle cx="30" cy="30" r="30" style="fill:#e0e0e0"/><path d="m35.66 19.39.7-1.75h2L37.4 15l1.2-3 3.4 9h-2.51l-.58-1.61zM33.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.2zM20.3 17.91h1.48q.675 0 1.2-.15l.39-1.18 1.07-3.3a2.6 2.6 0 0 0-.28-.37c-.55-.6-1.36-.91-2.42-.91H18v9h2.3v-3.1zm1.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.32" style="position:relative;fill:#b0b0b0"/><g class="lh-gauge--pwa__component lh-gauge--pwa__fast-reliable-installable-badges"><g transform="translate(8 29)"><path fill="url(#lh-gauge--pwa__fast-reliable__shadow-gradient-0)" d="M16.321 30.463 3 17.143 17.142 3l22.365 22.365A29.86 29.86 0 0 1 22 31a30 30 0 0 1-5.679-.537"/><use href="#lh-gauge--pwa__fast-reliable-badge-0"/></g><g transform="translate(32 29)"><path fill="url(#lh-gauge--pwa__installable__shadow-gradient-0)" d="M25.982 11.84a30.1 30.1 0 0 1-13.08 15.203L3 17.143 17.142 3z"/><use href="#lh-gauge--pwa__installable-badge-0"/></g></g></svg><text y="160" alignment-baseline="central" class="guage-title" dominant-baseline="central" text-anchor="middle">
		<tspan x="100" dy="-6">Progressive</tspan>
		<tspan x="100" dy="30">Web App</tspan>
	</text></svg><svg id="legend" width="604" height="76" x="200" y="250"><path id="canvas_background" fill="none" d="M-1-1h604v80H-1z"/><rect width="600" height="72" y="1" fill="#000" fill-opacity="0" stroke-width="2" rx="40" style="stroke:#616161"/><rect id="svg_3" width="48" height="14" x="35" y="30" fill="#ff4e42" stroke="#000" stroke-opacity="null" stroke-width="0" rx="8"/><rect id="svg_4" width="48" height="14" x="220" y="30" fill="#ffa400" stroke="#000" stroke-opacity="null" stroke-width="0" rx="6"/><rect id="svg_5" width="48" height="14" x="410" y="30" fill="#0cce6b" stroke="#000" stroke-opacity="null" stroke-width="0" rx="6"/><text xml:space="preserve" id="svg_6" x="100" y="45" stroke="#000" stroke-opacity="null" stroke-width="0" class="metric guage-title" font-size="26" text-anchor="start">0-49</text><text xml:space="preserve" id="svg_7" x="280" y="45" stroke="#000" stroke-opacity="null" stroke-width="0" class="metric guage-title" font-size="26" text-anchor="start">50-89</text><text xml:space="preserve" id="svg_8" x="470" y="45" stroke="#000" stroke-opacity="null" stroke-width="0" class="metric guage-title" font-size="26" text-anchor="start">90-100</text></svg></svg>