(svg) performance scores

SVG graphic of a performance test's result scores.

by Nicholas Berlette

HTML

<script src="https://unpkg.com/windicss-runtime-dom"></script>
<div style="opacity:0;transform:perspective(400px) scale3d(var(--tw-scale-x,0),var(--tw-scale-y,0.5),var(--tw-scale-z,1)) translatey(var(--tw-translate-y,800px)) translatez(var(--tw-translate-z,-500px));transform-origin:50% 50%;transition:transform .4s ease-out,opacity .5s ease-in;" class="block w-screen h-screen m-0 p-0 flex flex-col place-items-center align-center justify-center !opacity-100 !scale-100 !translate-z-[0px] !translate-y-[0px]">
	<svg xmlns="http://www.w3.org/2000/svg" width="467" height="400" viewBox="0 0 467 400" fill="none" class="group">
  <g filter="url(#filter0_d_801_19373)">
    <g clip-path="url(#clip0_801_19373)">
      <rect x="15" y="10" width="437" height="380" rx="10" fill="white" />
      <rect x="155.74" y="238.778" width="264" height="14" rx="7" fill="#F6F6F9" />
      <rect x="147.901" y="238.778" width="89" height="14" rx="7" fill="#F29D41" />
      <path d="M46.7031 241.911L48.4727 241.911L48.4727 239.245L50.1016 239.245C51.8828 239.245 53.0723 238.097 53.0723 236.356L53.0723 236.345C53.0723 234.604 51.8828 233.456 50.1016 233.456L46.7031 233.456L46.7031 241.911ZM49.668 234.856C50.6816 234.856 51.2793 235.39 51.2793 236.351L51.2793 236.362C51.2793 237.323 50.6816 237.862 49.668 237.862L48.4727 237.862L48.4727 234.856L49.668 234.856ZM56.623 242.04C58.416 242.04 59.2832 240.979 59.4766 240.054L59.4941 239.989L57.9238 239.989L57.9121 240.024C57.7891 240.376 57.3613 240.763 56.6582 240.763C55.7852 240.763 55.2402 240.177 55.2227 239.175L59.5469 239.175L59.5469 238.647C59.5469 236.749 58.3926 235.501 56.5527 235.501C54.7129 235.501 53.5352 236.778 53.5352 238.776L53.5352 238.782C53.5352 240.792 54.7012 242.04 56.623 242.04ZM56.582 236.778C57.291 236.778 57.8008 237.229 57.9062 238.097L55.2402 238.097C55.3516 237.247 55.8789 236.778 56.582 236.778ZM60.4316 241.911L62.1426 241.911L62.1426 238.396C62.1426 237.481 62.6348 236.978 63.4785 236.978C63.7246 236.978 63.959 237.013...

CSS

.circle-loading {
  animation-duration: 6.66s;
  animation-delay: 5s;
  animation-iteration-count: 1;
  animation-direction: backwards;
  animation-name: loading;
  animation-fill-mode: both;
	transition: none;
}

@keyframes loading {
	0% {
		stroke-dasharray: 0 360;
	}
	100% {
		stroke-dasharray: 360 360;
	}
}

JavaScript

window.windicssRuntimeOptions = {
    /** Enable WindiCSS preflight feature */
    preflight: true,
    /** Scan the entire dom to infer the classnames on first load. longer TTFB but prevents FOUC. */
    extractInitial: true,
    /** Generate mock classes for browser to do the auto-completeion */
    mockClasses: false,
    /** Config object that is typically exported from windi.config.[js|ts|cjs|mjs] */
    config: {
        darkMode: "media",
        theme: {
            extend: {
                colors: {
                    primary: {
                        100: "#e4e1fe",
                        200: "#cac3fd",
                        300: "#ada4fa",
                        400: "#968cf6",
                        500: "#96BAFF",
                        600: "#554bce",
                        700: "#3c33ac",
                        800: "#27208b",
                        900: "#181373"
                    },
                    success: {
                        100: "#f1fcd4",
                        200: "#dff9aa",
                        300: "#c4ee7d",
                        400: "#a7de5a",
                        500: "#7fc92a",
                        600: "#64ac1e",
                        700: "#4b9015",
                        800: "#36740d",
                        900: "#266008"
                    },
                    warning: {
                        100: "#fff4d1",
                        200: "#ffe5a3",
                        300: "#ffd375",
                        400: "#ffc152",
                        500: "#ffa319",
                        600: "#db8212",
                        700: "#b7650c",
                        800: "#934a07",
                        900: "#7a3804"
                    },
                    danger: {
                        100: "#ffe6d9",
                        200: "#ffc7b4",
                        300: "#ffa28e",
                        400: "#ff7e72",
                        500: "#ff4444",
             ...