Quad KPI Delta Grid
Decorative 2x2 micro-bar-chart grid graphic. Restyle via --lk-* CSS variables.
Install
npx shadcn@latest add https://visual-blocks.akiho.dev/r/kpi-delta-grid.jsonnpx skills add akifo/landerkitBlocks work with zero setup thanks to baked defaults. Set --lk-accent(and optionally --lk-bg / --lk-radius /--lk-font / --lk-grid) on :rootor any wrapper to restyle.
Source
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 280" role="img" aria-label="Quad bar chart graphic — decorative" class="lk-block" data-lk="kpi-delta-grid" data-lk-contract="1">
<title>Quad bar chart graphic</title>
<desc>Decorative quad bar-chart graphic. Illustrative shape only; any implied data is fictional.</desc>
<style>
/* lk-contract v1 — synced from blocks/_contract/header.css */
[data-lk="kpi-delta-grid"] {
--_accent: var(--lk-accent, #4BE0C3);
--_bg: var(--lk-bg, #0A0F14);
--_radius: var(--lk-radius, 12px);
--_i: oklch(from var(--_bg) clamp(0.14, (0.68 - l) * 999, 0.93) min(c, 0.03) h);
--_i2: color-mix(in oklab, var(--_i) 62%, transparent);
--_i3: color-mix(in oklab, var(--_i) 42%, transparent);
--_hair: color-mix(in oklab, var(--_i) 8%, transparent);
--_g: var(--lk-grid, color-mix(in oklab, var(--_i) 9%, transparent));
--_surf: color-mix(in oklab, var(--_accent) 3%, var(--_bg));
--_soft: color-mix(in oklab, var(--_accent) 24%, transparent);
--_faint: color-mix(in oklab, var(--_accent) 12%, transparent);
--_glow: color-mix(in oklab, var(--_accent) 55%, var(--_bg));
color: var(--_accent);
font-family: var(--lk-font, 'Inter','Neue Haas Grotesk','Helvetica Neue',Arial,sans-serif);
}
/* base ink: text flips with the bg via --_i; dim/semantic classes override (see CONVENTIONS.md) */
[data-lk="kpi-delta-grid"] text,
[data-lk="kpi-delta-grid"] tspan { fill: var(--_i); }
/* Layer 3: block-specific — every selector MUST start with [data-lk="kpi-delta-grid"] */
[data-lk="kpi-delta-grid"] .card { fill: var(--_surf); stroke: var(--_hair); rx: var(--_radius); }
[data-lk="kpi-delta-grid"] .grid { fill: none; stroke: var(--_g); stroke-width: 1; }
[data-lk="kpi-delta-grid"] .hair { stroke: var(--_hair); stroke-width: 1; }
[data-lk="kpi-delta-grid"] .track { fill: var(--_g); rx: calc(var(--_radius) * .125); }
[data-lk="kpi-delta-grid"] .lift { fill: var(--_glow); opacity: .25; rx: calc(var(--_radius) * .2); }
[data-lk="kpi-delta-grid"] .bar-hi { fill: var(--_accent); rx: calc(var(--_radius) * .125); }
[data-lk="kpi-delta-grid"] .bar-2 { fill: color-mix(in oklab, var(--_accent) 78%, transparent); rx: calc(var(--_radius) * .125); }
[data-lk="kpi-delta-grid"] .bar-3 { fill: color-mix(in oklab, var(--_accent) 58%, transparent); rx: calc(var(--_radius) * .125); }
[data-lk="kpi-delta-grid"] .bar-4 { fill: color-mix(in oklab, var(--_accent) 40%, transparent); rx: calc(var(--_radius) * .125); }
[data-lk="kpi-delta-grid"] .halo { fill: var(--_faint); }
[data-lk="kpi-delta-grid"] .dot { fill: var(--_surf); stroke: var(--_accent); stroke-width: 1.5; }
/* Hover motion (opt-out): 2 stages — (1) each quadrant's micro-bars (+ the
tallest bar's luminance-lift bloom, grown together) rise from the shared
baseline, staggered top-left→top-right→bottom-left→bottom-right; (2) once all
four quadrants have grown, the top-left tile's tip halo + dot fade in and pop.
Off for reduced-motion visitors; set the motion token to 0 to force off. */
[data-lk="kpi-delta-grid"] .grow { transform-box: fill-box; transform-origin: bottom; }
[data-lk="kpi-delta-grid"] .tip { transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
[data-lk="kpi-delta-grid"]:hover .grow { animation: lk-kpi-delta-grid-grow calc(var(--lk-motion, 1) * .45s) cubic-bezier(.22,.61,.36,1) both; }
[data-lk="kpi-delta-grid"]:hover .q2 { animation-delay: calc(var(--lk-motion, 1) * .08s); }
[data-lk="kpi-delta-grid"]:hover .q3 { animation-delay: calc(var(--lk-motion, 1) * .16s); }
[data-lk="kpi-delta-grid"]:hover .q4 { animation-delay: calc(var(--lk-motion, 1) * .24s); }
[data-lk="kpi-delta-grid"]:hover .tip { animation: lk-kpi-delta-grid-pop calc(var(--lk-motion, 1) * .4s) ease-out both; animation-delay: calc(var(--lk-motion, 1) * .7s); }
}
@keyframes lk-kpi-delta-grid-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes lk-kpi-delta-grid-pop { 0% { opacity: 0; transform: scale(1); } 20% { opacity: 1; transform: scale(1); } 55% { transform: scale(1.4); } 100% { opacity: 1; transform: scale(1); } }
</style>
<rect class="card" x=".5" y=".5" width="479" height="279" rx="12" fill="#0E141B" stroke="#1A2128"/>
<!-- réseau crosses: top corners, on the grid token (silenced when lk-grid is transparent) -->
<path class="grid" d="M13 16h6M16 13v6M461 16h6M464 13v6" fill="none" stroke="#1C262C" stroke-width="1"/>
<!-- structural hairlines: quartering cross flush with the quadrant bounds -->
<line class="hair" x1="240" y1="20" x2="240" y2="260" stroke="#1A2128" stroke-width="1"/>
<line class="hair" x1="20" y1="140" x2="460" y2="140" stroke="#1A2128" stroke-width="1"/>
<!-- quadrant 1 (top-left): full-accent bar-chart tile, luminance-lift bloom + punched dot on the tallest bar -->
<rect class="track" x="60" y="45" width="140" height="70" rx="1.5" fill="#1C262C"/>
<g class="grow q1">
<rect class="lift" x="184" y="44" width="11" height="72" rx="2.4" fill="#2E8274" opacity=".25"/>
<rect class="bar-hi" x="66" y="85.6" width="9" height="29.4" rx="1.5" fill="#4BE0C3"/>
<rect class="bar-hi" x="83" y="80" width="9" height="35" rx="1.5" fill="#4BE0C3"/>
<rect class="bar-hi" x="100" y="82.8" width="9" height="32.2" rx="1.5" fill="#4BE0C3"/>
<rect class="bar-hi" x="117" y="74.4" width="9" height="40.6" rx="1.5" fill="#4BE0C3"/>
<rect class="bar-hi" x="134" y="70.2" width="9" height="44.8" rx="1.5" fill="#4BE0C3"/>
<rect class="bar-hi" x="151" y="64.6" width="9" height="50.4" rx="1.5" fill="#4BE0C3"/>
<rect class="bar-hi" x="168" y="59" width="9" height="56" rx="1.5" fill="#4BE0C3"/>
<rect class="bar-hi" x="185" y="45" width="9" height="70" rx="1.5" fill="#4BE0C3"/>
</g>
<g class="tip">
<circle class="halo" cx="189.5" cy="45" r="5" fill="#4BE0C31F"/>
<circle class="dot" cx="189.5" cy="45" r="2.4" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
</g>
<!-- quadrant 2 (top-right): rising bar-chart tile, stepped down to 78% accent -->
<rect class="track" x="280" y="45" width="140" height="70" rx="1.5" fill="#1C262C"/>
<g class="grow q2">
<rect class="bar-2" x="286" y="81.4" width="9" height="33.6" rx="1.5" fill="#4BE0C3C8"/>
<rect class="bar-2" x="303" y="76.5" width="9" height="38.5" rx="1.5" fill="#4BE0C3C8"/>
<rect class="bar-2" x="320" y="79.3" width="9" height="35.7" rx="1.5" fill="#4BE0C3C8"/>
<rect class="bar-2" x="337" y="73" width="9" height="42" rx="1.5" fill="#4BE0C3C8"/>
<rect class="bar-2" x="354" y="68.8" width="9" height="46.2" rx="1.5" fill="#4BE0C3C8"/>
<rect class="bar-2" x="371" y="64.6" width="9" height="50.4" rx="1.5" fill="#4BE0C3C8"/>
<rect class="bar-2" x="388" y="60.4" width="9" height="54.6" rx="1.5" fill="#4BE0C3C8"/>
<rect class="bar-2" x="405" y="54.8" width="9" height="60.2" rx="1.5" fill="#4BE0C3C8"/>
</g>
<!-- quadrant 3 (bottom-left): falling bar-chart tile, stepped down to 58% accent -->
<rect class="track" x="60" y="165" width="140" height="70" rx="1.5" fill="#1C262C"/>
<g class="grow q3">
<rect class="bar-3" x="66" y="172" width="9" height="63" rx="1.5" fill="#4BE0C394"/>
<rect class="bar-3" x="83" y="176.2" width="9" height="58.8" rx="1.5" fill="#4BE0C394"/>
<rect class="bar-3" x="100" y="173.4" width="9" height="61.6" rx="1.5" fill="#4BE0C394"/>
<rect class="bar-3" x="117" y="180.4" width="9" height="54.6" rx="1.5" fill="#4BE0C394"/>
<rect class="bar-3" x="134" y="184.6" width="9" height="50.4" rx="1.5" fill="#4BE0C394"/>
<rect class="bar-3" x="151" y="182.5" width="9" height="52.5" rx="1.5" fill="#4BE0C394"/>
<rect class="bar-3" x="168" y="188.8" width="9" height="46.2" rx="1.5" fill="#4BE0C394"/>
<rect class="bar-3" x="185" y="194.4" width="9" height="40.6" rx="1.5" fill="#4BE0C394"/>
</g>
<!-- quadrant 4 (bottom-right): falling bar-chart tile, stepped down to 40% accent -->
<rect class="track" x="280" y="165" width="140" height="70" rx="1.5" fill="#1C262C"/>
<g class="grow q4">
<rect class="bar-4" x="286" y="175.5" width="9" height="59.5" rx="1.5" fill="#4BE0C366"/>
<rect class="bar-4" x="303" y="179.7" width="9" height="55.3" rx="1.5" fill="#4BE0C366"/>
<rect class="bar-4" x="320" y="177.6" width="9" height="57.4" rx="1.5" fill="#4BE0C366"/>
<rect class="bar-4" x="337" y="183.2" width="9" height="51.8" rx="1.5" fill="#4BE0C366"/>
<rect class="bar-4" x="354" y="186.7" width="9" height="48.3" rx="1.5" fill="#4BE0C366"/>
<rect class="bar-4" x="371" y="184.6" width="9" height="50.4" rx="1.5" fill="#4BE0C366"/>
<rect class="bar-4" x="388" y="190.9" width="9" height="44.1" rx="1.5" fill="#4BE0C366"/>
<rect class="bar-4" x="405" y="196.5" width="9" height="38.5" rx="1.5" fill="#4BE0C366"/>
</g>
</svg>
/* GENERATED FROM blocks/ (catalog.json + *.svg + _contract/) — DO NOT EDIT. Run `pnpm generate`. */
import type { HTMLAttributes } from 'react';
const svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 480 280\" role=\"img\" aria-label=\"Quad bar chart graphic — decorative\" class=\"lk-block\" data-lk=\"kpi-delta-grid\" data-lk-contract=\"1\">\n <title>Quad bar chart graphic</title>\n <desc>Decorative quad bar-chart graphic. Illustrative shape only; any implied data is fictional.</desc>\n <style>\n /* lk-contract v1 — synced from blocks/_contract/header.css */\n [data-lk=\"kpi-delta-grid\"] {\n --_accent: var(--lk-accent, #4BE0C3);\n --_bg: var(--lk-bg, #0A0F14);\n --_radius: var(--lk-radius, 12px);\n --_i: oklch(from var(--_bg) clamp(0.14, (0.68 - l) * 999, 0.93) min(c, 0.03) h);\n --_i2: color-mix(in oklab, var(--_i) 62%, transparent);\n --_i3: color-mix(in oklab, var(--_i) 42%, transparent);\n --_hair: color-mix(in oklab, var(--_i) 8%, transparent);\n --_g: var(--lk-grid, color-mix(in oklab, var(--_i) 9%, transparent));\n --_surf: color-mix(in oklab, var(--_accent) 3%, var(--_bg));\n --_soft: color-mix(in oklab, var(--_accent) 24%, transparent);\n --_faint: color-mix(in oklab, var(--_accent) 12%, transparent);\n --_glow: color-mix(in oklab, var(--_accent) 55%, var(--_bg));\n color: var(--_accent);\n font-family: var(--lk-font, 'Inter','Neue Haas Grotesk','Helvetica Neue',Arial,sans-serif);\n }\n /* base ink: text flips with the bg via --_i; dim/semantic classes override (see CONVENTIONS.md) */\n [data-lk=\"kpi-delta-grid\"] text,\n [data-lk=\"kpi-delta-grid\"] tspan { fill: var(--_i); }\n\n\n /* Layer 3: block-specific — every selector MUST start with [data-lk=\"kpi-delta-grid\"] */\n [data-lk=\"kpi-delta-grid\"] .card { fill: var(--_surf); stroke: var(--_hair); rx: var(--_radius); }\n [data-lk=\"kpi-delta-grid\"] .grid { fill: none; stroke: var(--_g); stroke-width: 1; }\n [data-lk=\"kpi-delta-grid\"] .hair { stroke: var(--_hair); stroke-width: 1; }\n [data-lk=\"kpi-delta-grid\"] .track { fill: var(--_g); rx: calc(var(--_radius) * .125); }\n [data-lk=\"kpi-delta-grid\"] .lift { fill: var(--_glow); opacity: .25; rx: calc(var(--_radius) * .2); }\n [data-lk=\"kpi-delta-grid\"] .bar-hi { fill: var(--_accent); rx: calc(var(--_radius) * .125); }\n [data-lk=\"kpi-delta-grid\"] .bar-2 { fill: color-mix(in oklab, var(--_accent) 78%, transparent); rx: calc(var(--_radius) * .125); }\n [data-lk=\"kpi-delta-grid\"] .bar-3 { fill: color-mix(in oklab, var(--_accent) 58%, transparent); rx: calc(var(--_radius) * .125); }\n [data-lk=\"kpi-delta-grid\"] .bar-4 { fill: color-mix(in oklab, var(--_accent) 40%, transparent); rx: calc(var(--_radius) * .125); }\n [data-lk=\"kpi-delta-grid\"] .halo { fill: var(--_faint); }\n [data-lk=\"kpi-delta-grid\"] .dot { fill: var(--_surf); stroke: var(--_accent); stroke-width: 1.5; }\n\n /* Hover motion (opt-out): 2 stages — (1) each quadrant's micro-bars (+ the\n tallest bar's luminance-lift bloom, grown together) rise from the shared\n baseline, staggered top-left→top-right→bottom-left→bottom-right; (2) once all\n four quadrants have grown, the top-left tile's tip halo + dot fade in and pop.\n Off for reduced-motion visitors; set the motion token to 0 to force off. */\n [data-lk=\"kpi-delta-grid\"] .grow { transform-box: fill-box; transform-origin: bottom; }\n [data-lk=\"kpi-delta-grid\"] .tip { transform-box: fill-box; }\n @media (prefers-reduced-motion: no-preference) {\n [data-lk=\"kpi-delta-grid\"]:hover .grow { animation: lk-kpi-delta-grid-grow calc(var(--lk-motion, 1) * .45s) cubic-bezier(.22,.61,.36,1) both; }\n [data-lk=\"kpi-delta-grid\"]:hover .q2 { animation-delay: calc(var(--lk-motion, 1) * .08s); }\n [data-lk=\"kpi-delta-grid\"]:hover .q3 { animation-delay: calc(var(--lk-motion, 1) * .16s); }\n [data-lk=\"kpi-delta-grid\"]:hover .q4 { animation-delay: calc(var(--lk-motion, 1) * .24s); }\n [data-lk=\"kpi-delta-grid\"]:hover .tip { animation: lk-kpi-delta-grid-pop calc(var(--lk-motion, 1) * .4s) ease-out both; animation-delay: calc(var(--lk-motion, 1) * .7s); }\n }\n @keyframes lk-kpi-delta-grid-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }\n @keyframes lk-kpi-delta-grid-pop { 0% { opacity: 0; transform: scale(1); } 20% { opacity: 1; transform: scale(1); } 55% { transform: scale(1.4); } 100% { opacity: 1; transform: scale(1); } }\n </style>\n <rect class=\"card\" x=\".5\" y=\".5\" width=\"479\" height=\"279\" rx=\"12\" fill=\"#0E141B\" stroke=\"#1A2128\"/>\n\n <!-- réseau crosses: top corners, on the grid token (silenced when lk-grid is transparent) -->\n <path class=\"grid\" d=\"M13 16h6M16 13v6M461 16h6M464 13v6\" fill=\"none\" stroke=\"#1C262C\" stroke-width=\"1\"/>\n\n <!-- structural hairlines: quartering cross flush with the quadrant bounds -->\n <line class=\"hair\" x1=\"240\" y1=\"20\" x2=\"240\" y2=\"260\" stroke=\"#1A2128\" stroke-width=\"1\"/>\n <line class=\"hair\" x1=\"20\" y1=\"140\" x2=\"460\" y2=\"140\" stroke=\"#1A2128\" stroke-width=\"1\"/>\n\n <!-- quadrant 1 (top-left): full-accent bar-chart tile, luminance-lift bloom + punched dot on the tallest bar -->\n <rect class=\"track\" x=\"60\" y=\"45\" width=\"140\" height=\"70\" rx=\"1.5\" fill=\"#1C262C\"/>\n <g class=\"grow q1\">\n <rect class=\"lift\" x=\"184\" y=\"44\" width=\"11\" height=\"72\" rx=\"2.4\" fill=\"#2E8274\" opacity=\".25\"/>\n <rect class=\"bar-hi\" x=\"66\" y=\"85.6\" width=\"9\" height=\"29.4\" rx=\"1.5\" fill=\"#4BE0C3\"/>\n <rect class=\"bar-hi\" x=\"83\" y=\"80\" width=\"9\" height=\"35\" rx=\"1.5\" fill=\"#4BE0C3\"/>\n <rect class=\"bar-hi\" x=\"100\" y=\"82.8\" width=\"9\" height=\"32.2\" rx=\"1.5\" fill=\"#4BE0C3\"/>\n <rect class=\"bar-hi\" x=\"117\" y=\"74.4\" width=\"9\" height=\"40.6\" rx=\"1.5\" fill=\"#4BE0C3\"/>\n <rect class=\"bar-hi\" x=\"134\" y=\"70.2\" width=\"9\" height=\"44.8\" rx=\"1.5\" fill=\"#4BE0C3\"/>\n <rect class=\"bar-hi\" x=\"151\" y=\"64.6\" width=\"9\" height=\"50.4\" rx=\"1.5\" fill=\"#4BE0C3\"/>\n <rect class=\"bar-hi\" x=\"168\" y=\"59\" width=\"9\" height=\"56\" rx=\"1.5\" fill=\"#4BE0C3\"/>\n <rect class=\"bar-hi\" x=\"185\" y=\"45\" width=\"9\" height=\"70\" rx=\"1.5\" fill=\"#4BE0C3\"/>\n </g>\n <g class=\"tip\">\n <circle class=\"halo\" cx=\"189.5\" cy=\"45\" r=\"5\" fill=\"#4BE0C31F\"/>\n <circle class=\"dot\" cx=\"189.5\" cy=\"45\" r=\"2.4\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n </g>\n\n <!-- quadrant 2 (top-right): rising bar-chart tile, stepped down to 78% accent -->\n <rect class=\"track\" x=\"280\" y=\"45\" width=\"140\" height=\"70\" rx=\"1.5\" fill=\"#1C262C\"/>\n <g class=\"grow q2\">\n <rect class=\"bar-2\" x=\"286\" y=\"81.4\" width=\"9\" height=\"33.6\" rx=\"1.5\" fill=\"#4BE0C3C8\"/>\n <rect class=\"bar-2\" x=\"303\" y=\"76.5\" width=\"9\" height=\"38.5\" rx=\"1.5\" fill=\"#4BE0C3C8\"/>\n <rect class=\"bar-2\" x=\"320\" y=\"79.3\" width=\"9\" height=\"35.7\" rx=\"1.5\" fill=\"#4BE0C3C8\"/>\n <rect class=\"bar-2\" x=\"337\" y=\"73\" width=\"9\" height=\"42\" rx=\"1.5\" fill=\"#4BE0C3C8\"/>\n <rect class=\"bar-2\" x=\"354\" y=\"68.8\" width=\"9\" height=\"46.2\" rx=\"1.5\" fill=\"#4BE0C3C8\"/>\n <rect class=\"bar-2\" x=\"371\" y=\"64.6\" width=\"9\" height=\"50.4\" rx=\"1.5\" fill=\"#4BE0C3C8\"/>\n <rect class=\"bar-2\" x=\"388\" y=\"60.4\" width=\"9\" height=\"54.6\" rx=\"1.5\" fill=\"#4BE0C3C8\"/>\n <rect class=\"bar-2\" x=\"405\" y=\"54.8\" width=\"9\" height=\"60.2\" rx=\"1.5\" fill=\"#4BE0C3C8\"/>\n </g>\n\n <!-- quadrant 3 (bottom-left): falling bar-chart tile, stepped down to 58% accent -->\n <rect class=\"track\" x=\"60\" y=\"165\" width=\"140\" height=\"70\" rx=\"1.5\" fill=\"#1C262C\"/>\n <g class=\"grow q3\">\n <rect class=\"bar-3\" x=\"66\" y=\"172\" width=\"9\" height=\"63\" rx=\"1.5\" fill=\"#4BE0C394\"/>\n <rect class=\"bar-3\" x=\"83\" y=\"176.2\" width=\"9\" height=\"58.8\" rx=\"1.5\" fill=\"#4BE0C394\"/>\n <rect class=\"bar-3\" x=\"100\" y=\"173.4\" width=\"9\" height=\"61.6\" rx=\"1.5\" fill=\"#4BE0C394\"/>\n <rect class=\"bar-3\" x=\"117\" y=\"180.4\" width=\"9\" height=\"54.6\" rx=\"1.5\" fill=\"#4BE0C394\"/>\n <rect class=\"bar-3\" x=\"134\" y=\"184.6\" width=\"9\" height=\"50.4\" rx=\"1.5\" fill=\"#4BE0C394\"/>\n <rect class=\"bar-3\" x=\"151\" y=\"182.5\" width=\"9\" height=\"52.5\" rx=\"1.5\" fill=\"#4BE0C394\"/>\n <rect class=\"bar-3\" x=\"168\" y=\"188.8\" width=\"9\" height=\"46.2\" rx=\"1.5\" fill=\"#4BE0C394\"/>\n <rect class=\"bar-3\" x=\"185\" y=\"194.4\" width=\"9\" height=\"40.6\" rx=\"1.5\" fill=\"#4BE0C394\"/>\n </g>\n\n <!-- quadrant 4 (bottom-right): falling bar-chart tile, stepped down to 40% accent -->\n <rect class=\"track\" x=\"280\" y=\"165\" width=\"140\" height=\"70\" rx=\"1.5\" fill=\"#1C262C\"/>\n <g class=\"grow q4\">\n <rect class=\"bar-4\" x=\"286\" y=\"175.5\" width=\"9\" height=\"59.5\" rx=\"1.5\" fill=\"#4BE0C366\"/>\n <rect class=\"bar-4\" x=\"303\" y=\"179.7\" width=\"9\" height=\"55.3\" rx=\"1.5\" fill=\"#4BE0C366\"/>\n <rect class=\"bar-4\" x=\"320\" y=\"177.6\" width=\"9\" height=\"57.4\" rx=\"1.5\" fill=\"#4BE0C366\"/>\n <rect class=\"bar-4\" x=\"337\" y=\"183.2\" width=\"9\" height=\"51.8\" rx=\"1.5\" fill=\"#4BE0C366\"/>\n <rect class=\"bar-4\" x=\"354\" y=\"186.7\" width=\"9\" height=\"48.3\" rx=\"1.5\" fill=\"#4BE0C366\"/>\n <rect class=\"bar-4\" x=\"371\" y=\"184.6\" width=\"9\" height=\"50.4\" rx=\"1.5\" fill=\"#4BE0C366\"/>\n <rect class=\"bar-4\" x=\"388\" y=\"190.9\" width=\"9\" height=\"44.1\" rx=\"1.5\" fill=\"#4BE0C366\"/>\n <rect class=\"bar-4\" x=\"405\" y=\"196.5\" width=\"9\" height=\"38.5\" rx=\"1.5\" fill=\"#4BE0C366\"/>\n </g>\n</svg>\n";
export function QuadKPIDeltaGrid(props: HTMLAttributes<HTMLDivElement>) {
return <div {...props} dangerouslySetInnerHTML={{ __html: svg }} />;
}
export default QuadKPIDeltaGrid;
<!-- GENERATED FROM blocks/ (catalog.json + *.svg + _contract/) — DO NOT EDIT. Run `pnpm generate`. -->
<template>
<div v-html="svg" />
</template>
<script setup lang="ts">
const svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 480 280\" role=\"img\" aria-label=\"Quad bar chart graphic — decorative\" class=\"lk-block\" data-lk=\"kpi-delta-grid\" data-lk-contract=\"1\">\n <title>Quad bar chart graphic</title>\n <desc>Decorative quad bar-chart graphic. Illustrative shape only; any implied data is fictional.</desc>\n <style>\n /* lk-contract v1 — synced from blocks/_contract/header.css */\n [data-lk=\"kpi-delta-grid\"] {\n --_accent: var(--lk-accent, #4BE0C3);\n --_bg: var(--lk-bg, #0A0F14);\n --_radius: var(--lk-radius, 12px);\n --_i: oklch(from var(--_bg) clamp(0.14, (0.68 - l) * 999, 0.93) min(c, 0.03) h);\n --_i2: color-mix(in oklab, var(--_i) 62%, transparent);\n --_i3: color-mix(in oklab, var(--_i) 42%, transparent);\n --_hair: color-mix(in oklab, var(--_i) 8%, transparent);\n --_g: var(--lk-grid, color-mix(in oklab, var(--_i) 9%, transparent));\n --_surf: color-mix(in oklab, var(--_accent) 3%, var(--_bg));\n --_soft: color-mix(in oklab, var(--_accent) 24%, transparent);\n --_faint: color-mix(in oklab, var(--_accent) 12%, transparent);\n --_glow: color-mix(in oklab, var(--_accent) 55%, var(--_bg));\n color: var(--_accent);\n font-family: var(--lk-font, 'Inter','Neue Haas Grotesk','Helvetica Neue',Arial,sans-serif);\n }\n /* base ink: text flips with the bg via --_i; dim/semantic classes override (see CONVENTIONS.md) */\n [data-lk=\"kpi-delta-grid\"] text,\n [data-lk=\"kpi-delta-grid\"] tspan { fill: var(--_i); }\n\n\n /* Layer 3: block-specific — every selector MUST start with [data-lk=\"kpi-delta-grid\"] */\n [data-lk=\"kpi-delta-grid\"] .card { fill: var(--_surf); stroke: var(--_hair); rx: var(--_radius); }\n [data-lk=\"kpi-delta-grid\"] .grid { fill: none; stroke: var(--_g); stroke-width: 1; }\n [data-lk=\"kpi-delta-grid\"] .hair { stroke: var(--_hair); stroke-width: 1; }\n [data-lk=\"kpi-delta-grid\"] .track { fill: var(--_g); rx: calc(var(--_radius) * .125); }\n [data-lk=\"kpi-delta-grid\"] .lift { fill: var(--_glow); opacity: .25; rx: calc(var(--_radius) * .2); }\n [data-lk=\"kpi-delta-grid\"] .bar-hi { fill: var(--_accent); rx: calc(var(--_radius) * .125); }\n [data-lk=\"kpi-delta-grid\"] .bar-2 { fill: color-mix(in oklab, var(--_accent) 78%, transparent); rx: calc(var(--_radius) * .125); }\n [data-lk=\"kpi-delta-grid\"] .bar-3 { fill: color-mix(in oklab, var(--_accent) 58%, transparent); rx: calc(var(--_radius) * .125); }\n [data-lk=\"kpi-delta-grid\"] .bar-4 { fill: color-mix(in oklab, var(--_accent) 40%, transparent); rx: calc(var(--_radius) * .125); }\n [data-lk=\"kpi-delta-grid\"] .halo { fill: var(--_faint); }\n [data-lk=\"kpi-delta-grid\"] .dot { fill: var(--_surf); stroke: var(--_accent); stroke-width: 1.5; }\n\n /* Hover motion (opt-out): 2 stages — (1) each quadrant's micro-bars (+ the\n tallest bar's luminance-lift bloom, grown together) rise from the shared\n baseline, staggered top-left→top-right→bottom-left→bottom-right; (2) once all\n four quadrants have grown, the top-left tile's tip halo + dot fade in and pop.\n Off for reduced-motion visitors; set the motion token to 0 to force off. */\n [data-lk=\"kpi-delta-grid\"] .grow { transform-box: fill-box; transform-origin: bottom; }\n [data-lk=\"kpi-delta-grid\"] .tip { transform-box: fill-box; }\n @media (prefers-reduced-motion: no-preference) {\n [data-lk=\"kpi-delta-grid\"]:hover .grow { animation: lk-kpi-delta-grid-grow calc(var(--lk-motion, 1) * .45s) cubic-bezier(.22,.61,.36,1) both; }\n [data-lk=\"kpi-delta-grid\"]:hover .q2 { animation-delay: calc(var(--lk-motion, 1) * .08s); }\n [data-lk=\"kpi-delta-grid\"]:hover .q3 { animation-delay: calc(var(--lk-motion, 1) * .16s); }\n [data-lk=\"kpi-delta-grid\"]:hover .q4 { animation-delay: calc(var(--lk-motion, 1) * .24s); }\n [data-lk=\"kpi-delta-grid\"]:hover .tip { animation: lk-kpi-delta-grid-pop calc(var(--lk-motion, 1) * .4s) ease-out both; animation-delay: calc(var(--lk-motion, 1) * .7s); }\n }\n @keyframes lk-kpi-delta-grid-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }\n @keyframes lk-kpi-delta-grid-pop { 0% { opacity: 0; transform: scale(1); } 20% { opacity: 1; transform: scale(1); } 55% { transform: scale(1.4); } 100% { opacity: 1; transform: scale(1); } }\n </style>\n <rect class=\"card\" x=\".5\" y=\".5\" width=\"479\" height=\"279\" rx=\"12\" fill=\"#0E141B\" stroke=\"#1A2128\"/>\n\n <!-- réseau crosses: top corners, on the grid token (silenced when lk-grid is transparent) -->\n <path class=\"grid\" d=\"M13 16h6M16 13v6M461 16h6M464 13v6\" fill=\"none\" stroke=\"#1C262C\" stroke-width=\"1\"/>\n\n <!-- structural hairlines: quartering cross flush with the quadrant bounds -->\n <line class=\"hair\" x1=\"240\" y1=\"20\" x2=\"240\" y2=\"260\" stroke=\"#1A2128\" stroke-width=\"1\"/>\n <line class=\"hair\" x1=\"20\" y1=\"140\" x2=\"460\" y2=\"140\" stroke=\"#1A2128\" stroke-width=\"1\"/>\n\n <!-- quadrant 1 (top-left): full-accent bar-chart tile, luminance-lift bloom + punched dot on the tallest bar -->\n <rect class=\"track\" x=\"60\" y=\"45\" width=\"140\" height=\"70\" rx=\"1.5\" fill=\"#1C262C\"/>\n <g class=\"grow q1\">\n <rect class=\"lift\" x=\"184\" y=\"44\" width=\"11\" height=\"72\" rx=\"2.4\" fill=\"#2E8274\" opacity=\".25\"/>\n <rect class=\"bar-hi\" x=\"66\" y=\"85.6\" width=\"9\" height=\"29.4\" rx=\"1.5\" fill=\"#4BE0C3\"/>\n <rect class=\"bar-hi\" x=\"83\" y=\"80\" width=\"9\" height=\"35\" rx=\"1.5\" fill=\"#4BE0C3\"/>\n <rect class=\"bar-hi\" x=\"100\" y=\"82.8\" width=\"9\" height=\"32.2\" rx=\"1.5\" fill=\"#4BE0C3\"/>\n <rect class=\"bar-hi\" x=\"117\" y=\"74.4\" width=\"9\" height=\"40.6\" rx=\"1.5\" fill=\"#4BE0C3\"/>\n <rect class=\"bar-hi\" x=\"134\" y=\"70.2\" width=\"9\" height=\"44.8\" rx=\"1.5\" fill=\"#4BE0C3\"/>\n <rect class=\"bar-hi\" x=\"151\" y=\"64.6\" width=\"9\" height=\"50.4\" rx=\"1.5\" fill=\"#4BE0C3\"/>\n <rect class=\"bar-hi\" x=\"168\" y=\"59\" width=\"9\" height=\"56\" rx=\"1.5\" fill=\"#4BE0C3\"/>\n <rect class=\"bar-hi\" x=\"185\" y=\"45\" width=\"9\" height=\"70\" rx=\"1.5\" fill=\"#4BE0C3\"/>\n </g>\n <g class=\"tip\">\n <circle class=\"halo\" cx=\"189.5\" cy=\"45\" r=\"5\" fill=\"#4BE0C31F\"/>\n <circle class=\"dot\" cx=\"189.5\" cy=\"45\" r=\"2.4\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n </g>\n\n <!-- quadrant 2 (top-right): rising bar-chart tile, stepped down to 78% accent -->\n <rect class=\"track\" x=\"280\" y=\"45\" width=\"140\" height=\"70\" rx=\"1.5\" fill=\"#1C262C\"/>\n <g class=\"grow q2\">\n <rect class=\"bar-2\" x=\"286\" y=\"81.4\" width=\"9\" height=\"33.6\" rx=\"1.5\" fill=\"#4BE0C3C8\"/>\n <rect class=\"bar-2\" x=\"303\" y=\"76.5\" width=\"9\" height=\"38.5\" rx=\"1.5\" fill=\"#4BE0C3C8\"/>\n <rect class=\"bar-2\" x=\"320\" y=\"79.3\" width=\"9\" height=\"35.7\" rx=\"1.5\" fill=\"#4BE0C3C8\"/>\n <rect class=\"bar-2\" x=\"337\" y=\"73\" width=\"9\" height=\"42\" rx=\"1.5\" fill=\"#4BE0C3C8\"/>\n <rect class=\"bar-2\" x=\"354\" y=\"68.8\" width=\"9\" height=\"46.2\" rx=\"1.5\" fill=\"#4BE0C3C8\"/>\n <rect class=\"bar-2\" x=\"371\" y=\"64.6\" width=\"9\" height=\"50.4\" rx=\"1.5\" fill=\"#4BE0C3C8\"/>\n <rect class=\"bar-2\" x=\"388\" y=\"60.4\" width=\"9\" height=\"54.6\" rx=\"1.5\" fill=\"#4BE0C3C8\"/>\n <rect class=\"bar-2\" x=\"405\" y=\"54.8\" width=\"9\" height=\"60.2\" rx=\"1.5\" fill=\"#4BE0C3C8\"/>\n </g>\n\n <!-- quadrant 3 (bottom-left): falling bar-chart tile, stepped down to 58% accent -->\n <rect class=\"track\" x=\"60\" y=\"165\" width=\"140\" height=\"70\" rx=\"1.5\" fill=\"#1C262C\"/>\n <g class=\"grow q3\">\n <rect class=\"bar-3\" x=\"66\" y=\"172\" width=\"9\" height=\"63\" rx=\"1.5\" fill=\"#4BE0C394\"/>\n <rect class=\"bar-3\" x=\"83\" y=\"176.2\" width=\"9\" height=\"58.8\" rx=\"1.5\" fill=\"#4BE0C394\"/>\n <rect class=\"bar-3\" x=\"100\" y=\"173.4\" width=\"9\" height=\"61.6\" rx=\"1.5\" fill=\"#4BE0C394\"/>\n <rect class=\"bar-3\" x=\"117\" y=\"180.4\" width=\"9\" height=\"54.6\" rx=\"1.5\" fill=\"#4BE0C394\"/>\n <rect class=\"bar-3\" x=\"134\" y=\"184.6\" width=\"9\" height=\"50.4\" rx=\"1.5\" fill=\"#4BE0C394\"/>\n <rect class=\"bar-3\" x=\"151\" y=\"182.5\" width=\"9\" height=\"52.5\" rx=\"1.5\" fill=\"#4BE0C394\"/>\n <rect class=\"bar-3\" x=\"168\" y=\"188.8\" width=\"9\" height=\"46.2\" rx=\"1.5\" fill=\"#4BE0C394\"/>\n <rect class=\"bar-3\" x=\"185\" y=\"194.4\" width=\"9\" height=\"40.6\" rx=\"1.5\" fill=\"#4BE0C394\"/>\n </g>\n\n <!-- quadrant 4 (bottom-right): falling bar-chart tile, stepped down to 40% accent -->\n <rect class=\"track\" x=\"280\" y=\"165\" width=\"140\" height=\"70\" rx=\"1.5\" fill=\"#1C262C\"/>\n <g class=\"grow q4\">\n <rect class=\"bar-4\" x=\"286\" y=\"175.5\" width=\"9\" height=\"59.5\" rx=\"1.5\" fill=\"#4BE0C366\"/>\n <rect class=\"bar-4\" x=\"303\" y=\"179.7\" width=\"9\" height=\"55.3\" rx=\"1.5\" fill=\"#4BE0C366\"/>\n <rect class=\"bar-4\" x=\"320\" y=\"177.6\" width=\"9\" height=\"57.4\" rx=\"1.5\" fill=\"#4BE0C366\"/>\n <rect class=\"bar-4\" x=\"337\" y=\"183.2\" width=\"9\" height=\"51.8\" rx=\"1.5\" fill=\"#4BE0C366\"/>\n <rect class=\"bar-4\" x=\"354\" y=\"186.7\" width=\"9\" height=\"48.3\" rx=\"1.5\" fill=\"#4BE0C366\"/>\n <rect class=\"bar-4\" x=\"371\" y=\"184.6\" width=\"9\" height=\"50.4\" rx=\"1.5\" fill=\"#4BE0C366\"/>\n <rect class=\"bar-4\" x=\"388\" y=\"190.9\" width=\"9\" height=\"44.1\" rx=\"1.5\" fill=\"#4BE0C366\"/>\n <rect class=\"bar-4\" x=\"405\" y=\"196.5\" width=\"9\" height=\"38.5\" rx=\"1.5\" fill=\"#4BE0C366\"/>\n </g>\n</svg>\n";
</script>
<div style="--lk-accent: #4BE0C3; --lk-bg: #0A0F14;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 280" role="img" aria-label="Quad bar chart graphic — decorative" class="lk-block" data-lk="kpi-delta-grid" data-lk-contract="1">
<title>Quad bar chart graphic</title>
<desc>Decorative quad bar-chart graphic. Illustrative shape only; any implied data is fictional.</desc>
<style>
/* lk-contract v1 — synced from blocks/_contract/header.css */
[data-lk="kpi-delta-grid"] {
--_accent: var(--lk-accent, #4BE0C3);
--_bg: var(--lk-bg, #0A0F14);
--_radius: var(--lk-radius, 12px);
--_i: oklch(from var(--_bg) clamp(0.14, (0.68 - l) * 999, 0.93) min(c, 0.03) h);
--_i2: color-mix(in oklab, var(--_i) 62%, transparent);
--_i3: color-mix(in oklab, var(--_i) 42%, transparent);
--_hair: color-mix(in oklab, var(--_i) 8%, transparent);
--_g: var(--lk-grid, color-mix(in oklab, var(--_i) 9%, transparent));
--_surf: color-mix(in oklab, var(--_accent) 3%, var(--_bg));
--_soft: color-mix(in oklab, var(--_accent) 24%, transparent);
--_faint: color-mix(in oklab, var(--_accent) 12%, transparent);
--_glow: color-mix(in oklab, var(--_accent) 55%, var(--_bg));
color: var(--_accent);
font-family: var(--lk-font, 'Inter','Neue Haas Grotesk','Helvetica Neue',Arial,sans-serif);
}
/* base ink: text flips with the bg via --_i; dim/semantic classes override (see CONVENTIONS.md) */
[data-lk="kpi-delta-grid"] text,
[data-lk="kpi-delta-grid"] tspan { fill: var(--_i); }
/* Layer 3: block-specific — every selector MUST start with [data-lk="kpi-delta-grid"] */
[data-lk="kpi-delta-grid"] .card { fill: var(--_surf); stroke: var(--_hair); rx: var(--_radius); }
[data-lk="kpi-delta-grid"] .grid { fill: none; stroke: var(--_g); stroke-width: 1; }
[data-lk="kpi-delta-grid"] .hair { stroke: var(--_hair); stroke-width: 1; }
[data-lk="kpi-delta-grid"] .track { fill: var(--_g); rx: calc(var(--_radius) * .125); }
[data-lk="kpi-delta-grid"] .lift { fill: var(--_glow); opacity: .25; rx: calc(var(--_radius) * .2); }
[data-lk="kpi-delta-grid"] .bar-hi { fill: var(--_accent); rx: calc(var(--_radius) * .125); }
[data-lk="kpi-delta-grid"] .bar-2 { fill: color-mix(in oklab, var(--_accent) 78%, transparent); rx: calc(var(--_radius) * .125); }
[data-lk="kpi-delta-grid"] .bar-3 { fill: color-mix(in oklab, var(--_accent) 58%, transparent); rx: calc(var(--_radius) * .125); }
[data-lk="kpi-delta-grid"] .bar-4 { fill: color-mix(in oklab, var(--_accent) 40%, transparent); rx: calc(var(--_radius) * .125); }
[data-lk="kpi-delta-grid"] .halo { fill: var(--_faint); }
[data-lk="kpi-delta-grid"] .dot { fill: var(--_surf); stroke: var(--_accent); stroke-width: 1.5; }
/* Hover motion (opt-out): 2 stages — (1) each quadrant's micro-bars (+ the
tallest bar's luminance-lift bloom, grown together) rise from the shared
baseline, staggered top-left→top-right→bottom-left→bottom-right; (2) once all
four quadrants have grown, the top-left tile's tip halo + dot fade in and pop.
Off for reduced-motion visitors; set the motion token to 0 to force off. */
[data-lk="kpi-delta-grid"] .grow { transform-box: fill-box; transform-origin: bottom; }
[data-lk="kpi-delta-grid"] .tip { transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
[data-lk="kpi-delta-grid"]:hover .grow { animation: lk-kpi-delta-grid-grow calc(var(--lk-motion, 1) * .45s) cubic-bezier(.22,.61,.36,1) both; }
[data-lk="kpi-delta-grid"]:hover .q2 { animation-delay: calc(var(--lk-motion, 1) * .08s); }
[data-lk="kpi-delta-grid"]:hover .q3 { animation-delay: calc(var(--lk-motion, 1) * .16s); }
[data-lk="kpi-delta-grid"]:hover .q4 { animation-delay: calc(var(--lk-motion, 1) * .24s); }
[data-lk="kpi-delta-grid"]:hover .tip { animation: lk-kpi-delta-grid-pop calc(var(--lk-motion, 1) * .4s) ease-out both; animation-delay: calc(var(--lk-motion, 1) * .7s); }
}
@keyframes lk-kpi-delta-grid-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes lk-kpi-delta-grid-pop { 0% { opacity: 0; transform: scale(1); } 20% { opacity: 1; transform: scale(1); } 55% { transform: scale(1.4); } 100% { opacity: 1; transform: scale(1); } }
</style>
<rect class="card" x=".5" y=".5" width="479" height="279" rx="12" fill="#0E141B" stroke="#1A2128"/>
<!-- réseau crosses: top corners, on the grid token (silenced when lk-grid is transparent) -->
<path class="grid" d="M13 16h6M16 13v6M461 16h6M464 13v6" fill="none" stroke="#1C262C" stroke-width="1"/>
<!-- structural hairlines: quartering cross flush with the quadrant bounds -->
<line class="hair" x1="240" y1="20" x2="240" y2="260" stroke="#1A2128" stroke-width="1"/>
<line class="hair" x1="20" y1="140" x2="460" y2="140" stroke="#1A2128" stroke-width="1"/>
<!-- quadrant 1 (top-left): full-accent bar-chart tile, luminance-lift bloom + punched dot on the tallest bar -->
<rect class="track" x="60" y="45" width="140" height="70" rx="1.5" fill="#1C262C"/>
<g class="grow q1">
<rect class="lift" x="184" y="44" width="11" height="72" rx="2.4" fill="#2E8274" opacity=".25"/>
<rect class="bar-hi" x="66" y="85.6" width="9" height="29.4" rx="1.5" fill="#4BE0C3"/>
<rect class="bar-hi" x="83" y="80" width="9" height="35" rx="1.5" fill="#4BE0C3"/>
<rect class="bar-hi" x="100" y="82.8" width="9" height="32.2" rx="1.5" fill="#4BE0C3"/>
<rect class="bar-hi" x="117" y="74.4" width="9" height="40.6" rx="1.5" fill="#4BE0C3"/>
<rect class="bar-hi" x="134" y="70.2" width="9" height="44.8" rx="1.5" fill="#4BE0C3"/>
<rect class="bar-hi" x="151" y="64.6" width="9" height="50.4" rx="1.5" fill="#4BE0C3"/>
<rect class="bar-hi" x="168" y="59" width="9" height="56" rx="1.5" fill="#4BE0C3"/>
<rect class="bar-hi" x="185" y="45" width="9" height="70" rx="1.5" fill="#4BE0C3"/>
</g>
<g class="tip">
<circle class="halo" cx="189.5" cy="45" r="5" fill="#4BE0C31F"/>
<circle class="dot" cx="189.5" cy="45" r="2.4" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
</g>
<!-- quadrant 2 (top-right): rising bar-chart tile, stepped down to 78% accent -->
<rect class="track" x="280" y="45" width="140" height="70" rx="1.5" fill="#1C262C"/>
<g class="grow q2">
<rect class="bar-2" x="286" y="81.4" width="9" height="33.6" rx="1.5" fill="#4BE0C3C8"/>
<rect class="bar-2" x="303" y="76.5" width="9" height="38.5" rx="1.5" fill="#4BE0C3C8"/>
<rect class="bar-2" x="320" y="79.3" width="9" height="35.7" rx="1.5" fill="#4BE0C3C8"/>
<rect class="bar-2" x="337" y="73" width="9" height="42" rx="1.5" fill="#4BE0C3C8"/>
<rect class="bar-2" x="354" y="68.8" width="9" height="46.2" rx="1.5" fill="#4BE0C3C8"/>
<rect class="bar-2" x="371" y="64.6" width="9" height="50.4" rx="1.5" fill="#4BE0C3C8"/>
<rect class="bar-2" x="388" y="60.4" width="9" height="54.6" rx="1.5" fill="#4BE0C3C8"/>
<rect class="bar-2" x="405" y="54.8" width="9" height="60.2" rx="1.5" fill="#4BE0C3C8"/>
</g>
<!-- quadrant 3 (bottom-left): falling bar-chart tile, stepped down to 58% accent -->
<rect class="track" x="60" y="165" width="140" height="70" rx="1.5" fill="#1C262C"/>
<g class="grow q3">
<rect class="bar-3" x="66" y="172" width="9" height="63" rx="1.5" fill="#4BE0C394"/>
<rect class="bar-3" x="83" y="176.2" width="9" height="58.8" rx="1.5" fill="#4BE0C394"/>
<rect class="bar-3" x="100" y="173.4" width="9" height="61.6" rx="1.5" fill="#4BE0C394"/>
<rect class="bar-3" x="117" y="180.4" width="9" height="54.6" rx="1.5" fill="#4BE0C394"/>
<rect class="bar-3" x="134" y="184.6" width="9" height="50.4" rx="1.5" fill="#4BE0C394"/>
<rect class="bar-3" x="151" y="182.5" width="9" height="52.5" rx="1.5" fill="#4BE0C394"/>
<rect class="bar-3" x="168" y="188.8" width="9" height="46.2" rx="1.5" fill="#4BE0C394"/>
<rect class="bar-3" x="185" y="194.4" width="9" height="40.6" rx="1.5" fill="#4BE0C394"/>
</g>
<!-- quadrant 4 (bottom-right): falling bar-chart tile, stepped down to 40% accent -->
<rect class="track" x="280" y="165" width="140" height="70" rx="1.5" fill="#1C262C"/>
<g class="grow q4">
<rect class="bar-4" x="286" y="175.5" width="9" height="59.5" rx="1.5" fill="#4BE0C366"/>
<rect class="bar-4" x="303" y="179.7" width="9" height="55.3" rx="1.5" fill="#4BE0C366"/>
<rect class="bar-4" x="320" y="177.6" width="9" height="57.4" rx="1.5" fill="#4BE0C366"/>
<rect class="bar-4" x="337" y="183.2" width="9" height="51.8" rx="1.5" fill="#4BE0C366"/>
<rect class="bar-4" x="354" y="186.7" width="9" height="48.3" rx="1.5" fill="#4BE0C366"/>
<rect class="bar-4" x="371" y="184.6" width="9" height="50.4" rx="1.5" fill="#4BE0C366"/>
<rect class="bar-4" x="388" y="190.9" width="9" height="44.1" rx="1.5" fill="#4BE0C366"/>
<rect class="bar-4" x="405" y="196.5" width="9" height="38.5" rx="1.5" fill="#4BE0C366"/>
</g>
</svg>
</div>