Share-of-Voice Radar Card
Decorative radar / spider-chart graphic — two overlaid polygons on a hex grid. Restyle via --lk-* CSS variables.
Install
npx shadcn@latest add https://visual-blocks.akiho.dev/r/radar-sov-card.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 360" role="img" aria-label="Radar graphic — decorative" class="lk-block" data-lk="radar-sov-card" data-lk-contract="1">
<title>Radar graphic</title>
<desc>Decorative radar graphic. Illustrative shape only; any implied data is fictional.</desc>
<style>
/* lk-contract v1 — synced from blocks/_contract/header.css */
[data-lk="radar-sov-card"] {
--_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="radar-sov-card"] text,
[data-lk="radar-sov-card"] tspan { fill: var(--_i); }
/* Layer 3: block-specific — every selector MUST start with [data-lk="radar-sov-card"] */
[data-lk="radar-sov-card"] .card { fill: var(--_surf); stroke: var(--_hair); rx: var(--_radius); }
[data-lk="radar-sov-card"] .grid { fill: none; stroke: var(--_g); stroke-width: 1; }
[data-lk="radar-sov-card"] .cmp { fill: none; stroke: var(--_i3); stroke-width: 1; stroke-dasharray: 4 3; stroke-linejoin: round; }
[data-lk="radar-sov-card"] .fillsec { fill: var(--_soft); stroke: none; }
[data-lk="radar-sov-card"] .lift { stroke: var(--_glow); stroke-width: 3.5; opacity: .25; }
[data-lk="radar-sov-card"] .edge { stroke: var(--_accent); stroke-width: 1.5; }
[data-lk="radar-sov-card"] .halo { fill: var(--_faint); }
[data-lk="radar-sov-card"] .dot { fill: var(--_surf); stroke: var(--_accent); stroke-width: 1.5; }
/* Hover motion (opt-out): everything starts gathered at the centre, then unfurls
clockwise from the top. Each fill wedge + its outline edge scales up out of the centre
in clockwise order (so the painted area is always what the appeared dots enclose), and
each dot scales up out of the centre in the same order. Off for reduced-motion
visitors; set the motion token to 0 to force off. */
[data-lk="radar-sov-card"] .sec,
[data-lk="radar-sov-card"] .vtx { transform-box: view-box; transform-origin: 240px 180px; }
@media (prefers-reduced-motion: no-preference) {
[data-lk="radar-sov-card"] .cmp { opacity: 0; }
[data-lk="radar-sov-card"]:hover .cmp { animation: lk-radar-sov-card-fade calc(var(--lk-motion, 1) * .7s) ease-out both; }
[data-lk="radar-sov-card"]:hover .sec { animation: lk-radar-sov-card-grow calc(var(--lk-motion, 1) * .38s) cubic-bezier(.22,.61,.36,1) both; }
[data-lk="radar-sov-card"]:hover .vtx { animation: lk-radar-sov-card-pop calc(var(--lk-motion, 1) * .34s) cubic-bezier(.22,.61,.36,1) both; }
[data-lk="radar-sov-card"]:hover .s1 { animation-delay: calc(var(--lk-motion, 1) * 0.14s); }
[data-lk="radar-sov-card"]:hover .s2 { animation-delay: calc(var(--lk-motion, 1) * 0.28s); }
[data-lk="radar-sov-card"]:hover .s3 { animation-delay: calc(var(--lk-motion, 1) * 0.42s); }
[data-lk="radar-sov-card"]:hover .s4 { animation-delay: calc(var(--lk-motion, 1) * 0.56s); }
[data-lk="radar-sov-card"]:hover .s5 { animation-delay: calc(var(--lk-motion, 1) * 0.7s); }
[data-lk="radar-sov-card"]:hover .s6 { animation-delay: calc(var(--lk-motion, 1) * 0.7s); }
[data-lk="radar-sov-card"]:hover .v1 { animation-delay: calc(var(--lk-motion, 1) * 0s); }
[data-lk="radar-sov-card"]:hover .v2 { animation-delay: calc(var(--lk-motion, 1) * 0.14s); }
[data-lk="radar-sov-card"]:hover .v3 { animation-delay: calc(var(--lk-motion, 1) * 0.28s); }
[data-lk="radar-sov-card"]:hover .v4 { animation-delay: calc(var(--lk-motion, 1) * 0.42s); }
[data-lk="radar-sov-card"]:hover .v5 { animation-delay: calc(var(--lk-motion, 1) * 0.56s); }
[data-lk="radar-sov-card"]:hover .v6 { animation-delay: calc(var(--lk-motion, 1) * 0.7s); }
}
@keyframes lk-radar-sov-card-grow { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes lk-radar-sov-card-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes lk-radar-sov-card-fade { from { opacity: 0; } to { opacity: 1; } }
</style>
<rect class="card" x=".5" y=".5" width="479" height="359" rx="12" fill="#0E141B" stroke="#1A2128"/>
<!-- graticule bed: 3 hex rings + 6 spokes + réseau crosses, all on the grid token (silenced when lk-grid is transparent) -->
<polygon class="grid" points="240,148.7 267.1,164.3 267.1,195.7 240,211.3 212.9,195.7 212.9,164.3" fill="none" stroke="#1C262C" stroke-width="1"/>
<polygon class="grid" points="240,117.3 294.3,148.7 294.3,211.3 240,242.7 185.7,211.3 185.7,148.7" fill="none" stroke="#1C262C" stroke-width="1"/>
<polygon class="grid" points="240,86 321.4,133 321.4,227 240,274 158.6,227 158.6,133" fill="none" stroke="#1C262C" stroke-width="1"/>
<path class="grid" d="M240 180L240 86M240 180L321.4 133M240 180L321.4 227M240 180L240 274M240 180L158.6 227M240 180L158.6 133" fill="none" stroke="#1C262C" stroke-width="1"/>
<path class="grid" d="M52 96h6M55 93v6M422 96h6M425 93v6M52 268h6M55 265v6M422 268h6M425 265v6" fill="none" stroke="#1C262C" stroke-width="1"/>
<!-- comparison polygon (dashed, background reference) -->
<polygon class="cmp" points="240,122.7 297,147.1 282.3,204.4 240,225.1 193.6,206.8 186.3,149" fill="none" stroke="#E6EDEE6B" stroke-width="1" stroke-dasharray="4 3"/>
<!-- fill wedges + outline edges: 6 centre-fan sectors, each scales out clockwise -->
<g class="sec s1">
<polygon class="fillsec" points="240,180 240,106.7 292.1,149.9" fill="#4BE0C33D"/>
<line class="lift" x1="240" y1="106.7" x2="292.1" y2="149.9" stroke="#2E8274" stroke-width="3.5" opacity=".25" stroke-linecap="round"/>
<line class="edge" x1="240" y1="106.7" x2="292.1" y2="149.9" stroke="#4BE0C3" stroke-width="1.5" stroke-linecap="round"/>
</g>
<g class="sec s2">
<polygon class="fillsec" points="240,180 292.1,149.9 297.8,213.4" fill="#4BE0C33D"/>
<line class="lift" x1="292.1" y1="149.9" x2="297.8" y2="213.4" stroke="#2E8274" stroke-width="3.5" opacity=".25" stroke-linecap="round"/>
<line class="edge" x1="292.1" y1="149.9" x2="297.8" y2="213.4" stroke="#4BE0C3" stroke-width="1.5" stroke-linecap="round"/>
</g>
<g class="sec s3">
<polygon class="fillsec" points="240,180 297.8,213.4 240,231.7" fill="#4BE0C33D"/>
<line class="lift" x1="297.8" y1="213.4" x2="240" y2="231.7" stroke="#2E8274" stroke-width="3.5" opacity=".25" stroke-linecap="round"/>
<line class="edge" x1="297.8" y1="213.4" x2="240" y2="231.7" stroke="#4BE0C3" stroke-width="1.5" stroke-linecap="round"/>
</g>
<g class="sec s4">
<polygon class="fillsec" points="240,180 240,231.7 173.2,218.5" fill="#4BE0C33D"/>
<line class="lift" x1="240" y1="231.7" x2="173.2" y2="218.5" stroke="#2E8274" stroke-width="3.5" opacity=".25" stroke-linecap="round"/>
<line class="edge" x1="240" y1="231.7" x2="173.2" y2="218.5" stroke="#4BE0C3" stroke-width="1.5" stroke-linecap="round"/>
</g>
<g class="sec s5">
<polygon class="fillsec" points="240,180 173.2,218.5 191.2,151.8" fill="#4BE0C33D"/>
<line class="lift" x1="173.2" y1="218.5" x2="191.2" y2="151.8" stroke="#2E8274" stroke-width="3.5" opacity=".25" stroke-linecap="round"/>
<line class="edge" x1="173.2" y1="218.5" x2="191.2" y2="151.8" stroke="#4BE0C3" stroke-width="1.5" stroke-linecap="round"/>
</g>
<g class="sec s6">
<polygon class="fillsec" points="240,180 191.2,151.8 240,106.7" fill="#4BE0C33D"/>
<line class="lift" x1="191.2" y1="151.8" x2="240" y2="106.7" stroke="#2E8274" stroke-width="3.5" opacity=".25" stroke-linecap="round"/>
<line class="edge" x1="191.2" y1="151.8" x2="240" y2="106.7" stroke="#4BE0C3" stroke-width="1.5" stroke-linecap="round"/>
</g>
<!-- vertex markers: each scales up out of the card centre, clockwise from the top -->
<g class="vtx v1">
<circle class="halo" cx="240" cy="106.7" r="5" fill="#4BE0C31F"/>
<circle class="dot" cx="240" cy="106.7" r="2.4" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
</g>
<g class="vtx v2">
<circle class="halo" cx="292.1" cy="149.9" r="5" fill="#4BE0C31F"/>
<circle class="dot" cx="292.1" cy="149.9" r="2.4" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
</g>
<g class="vtx v3">
<circle class="halo" cx="297.8" cy="213.4" r="5" fill="#4BE0C31F"/>
<circle class="dot" cx="297.8" cy="213.4" r="2.4" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
</g>
<g class="vtx v4">
<circle class="halo" cx="240" cy="231.7" r="5" fill="#4BE0C31F"/>
<circle class="dot" cx="240" cy="231.7" r="2.4" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
</g>
<g class="vtx v5">
<circle class="halo" cx="173.2" cy="218.5" r="5" fill="#4BE0C31F"/>
<circle class="dot" cx="173.2" cy="218.5" r="2.4" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
</g>
<g class="vtx v6">
<circle class="halo" cx="191.2" cy="151.8" r="5" fill="#4BE0C31F"/>
<circle class="dot" cx="191.2" cy="151.8" r="2.4" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
</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 360\" role=\"img\" aria-label=\"Radar graphic — decorative\" class=\"lk-block\" data-lk=\"radar-sov-card\" data-lk-contract=\"1\">\n <title>Radar graphic</title>\n <desc>Decorative radar 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=\"radar-sov-card\"] {\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=\"radar-sov-card\"] text,\n [data-lk=\"radar-sov-card\"] tspan { fill: var(--_i); }\n\n\n /* Layer 3: block-specific — every selector MUST start with [data-lk=\"radar-sov-card\"] */\n [data-lk=\"radar-sov-card\"] .card { fill: var(--_surf); stroke: var(--_hair); rx: var(--_radius); }\n [data-lk=\"radar-sov-card\"] .grid { fill: none; stroke: var(--_g); stroke-width: 1; }\n [data-lk=\"radar-sov-card\"] .cmp { fill: none; stroke: var(--_i3); stroke-width: 1; stroke-dasharray: 4 3; stroke-linejoin: round; }\n [data-lk=\"radar-sov-card\"] .fillsec { fill: var(--_soft); stroke: none; }\n [data-lk=\"radar-sov-card\"] .lift { stroke: var(--_glow); stroke-width: 3.5; opacity: .25; }\n [data-lk=\"radar-sov-card\"] .edge { stroke: var(--_accent); stroke-width: 1.5; }\n [data-lk=\"radar-sov-card\"] .halo { fill: var(--_faint); }\n [data-lk=\"radar-sov-card\"] .dot { fill: var(--_surf); stroke: var(--_accent); stroke-width: 1.5; }\n\n /* Hover motion (opt-out): everything starts gathered at the centre, then unfurls\n clockwise from the top. Each fill wedge + its outline edge scales up out of the centre\n in clockwise order (so the painted area is always what the appeared dots enclose), and\n each dot scales up out of the centre in the same order. Off for reduced-motion\n visitors; set the motion token to 0 to force off. */\n [data-lk=\"radar-sov-card\"] .sec,\n [data-lk=\"radar-sov-card\"] .vtx { transform-box: view-box; transform-origin: 240px 180px; }\n @media (prefers-reduced-motion: no-preference) {\n [data-lk=\"radar-sov-card\"] .cmp { opacity: 0; }\n [data-lk=\"radar-sov-card\"]:hover .cmp { animation: lk-radar-sov-card-fade calc(var(--lk-motion, 1) * .7s) ease-out both; }\n [data-lk=\"radar-sov-card\"]:hover .sec { animation: lk-radar-sov-card-grow calc(var(--lk-motion, 1) * .38s) cubic-bezier(.22,.61,.36,1) both; }\n [data-lk=\"radar-sov-card\"]:hover .vtx { animation: lk-radar-sov-card-pop calc(var(--lk-motion, 1) * .34s) cubic-bezier(.22,.61,.36,1) both; }\n [data-lk=\"radar-sov-card\"]:hover .s1 { animation-delay: calc(var(--lk-motion, 1) * 0.14s); }\n [data-lk=\"radar-sov-card\"]:hover .s2 { animation-delay: calc(var(--lk-motion, 1) * 0.28s); }\n [data-lk=\"radar-sov-card\"]:hover .s3 { animation-delay: calc(var(--lk-motion, 1) * 0.42s); }\n [data-lk=\"radar-sov-card\"]:hover .s4 { animation-delay: calc(var(--lk-motion, 1) * 0.56s); }\n [data-lk=\"radar-sov-card\"]:hover .s5 { animation-delay: calc(var(--lk-motion, 1) * 0.7s); }\n [data-lk=\"radar-sov-card\"]:hover .s6 { animation-delay: calc(var(--lk-motion, 1) * 0.7s); }\n [data-lk=\"radar-sov-card\"]:hover .v1 { animation-delay: calc(var(--lk-motion, 1) * 0s); }\n [data-lk=\"radar-sov-card\"]:hover .v2 { animation-delay: calc(var(--lk-motion, 1) * 0.14s); }\n [data-lk=\"radar-sov-card\"]:hover .v3 { animation-delay: calc(var(--lk-motion, 1) * 0.28s); }\n [data-lk=\"radar-sov-card\"]:hover .v4 { animation-delay: calc(var(--lk-motion, 1) * 0.42s); }\n [data-lk=\"radar-sov-card\"]:hover .v5 { animation-delay: calc(var(--lk-motion, 1) * 0.56s); }\n [data-lk=\"radar-sov-card\"]:hover .v6 { animation-delay: calc(var(--lk-motion, 1) * 0.7s); }\n }\n @keyframes lk-radar-sov-card-grow { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }\n @keyframes lk-radar-sov-card-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }\n @keyframes lk-radar-sov-card-fade { from { opacity: 0; } to { opacity: 1; } }\n </style>\n <rect class=\"card\" x=\".5\" y=\".5\" width=\"479\" height=\"359\" rx=\"12\" fill=\"#0E141B\" stroke=\"#1A2128\"/>\n\n <!-- graticule bed: 3 hex rings + 6 spokes + réseau crosses, all on the grid token (silenced when lk-grid is transparent) -->\n <polygon class=\"grid\" points=\"240,148.7 267.1,164.3 267.1,195.7 240,211.3 212.9,195.7 212.9,164.3\" fill=\"none\" stroke=\"#1C262C\" stroke-width=\"1\"/>\n <polygon class=\"grid\" points=\"240,117.3 294.3,148.7 294.3,211.3 240,242.7 185.7,211.3 185.7,148.7\" fill=\"none\" stroke=\"#1C262C\" stroke-width=\"1\"/>\n <polygon class=\"grid\" points=\"240,86 321.4,133 321.4,227 240,274 158.6,227 158.6,133\" fill=\"none\" stroke=\"#1C262C\" stroke-width=\"1\"/>\n <path class=\"grid\" d=\"M240 180L240 86M240 180L321.4 133M240 180L321.4 227M240 180L240 274M240 180L158.6 227M240 180L158.6 133\" fill=\"none\" stroke=\"#1C262C\" stroke-width=\"1\"/>\n <path class=\"grid\" d=\"M52 96h6M55 93v6M422 96h6M425 93v6M52 268h6M55 265v6M422 268h6M425 265v6\" fill=\"none\" stroke=\"#1C262C\" stroke-width=\"1\"/>\n\n <!-- comparison polygon (dashed, background reference) -->\n <polygon class=\"cmp\" points=\"240,122.7 297,147.1 282.3,204.4 240,225.1 193.6,206.8 186.3,149\" fill=\"none\" stroke=\"#E6EDEE6B\" stroke-width=\"1\" stroke-dasharray=\"4 3\"/>\n\n <!-- fill wedges + outline edges: 6 centre-fan sectors, each scales out clockwise -->\n <g class=\"sec s1\">\n <polygon class=\"fillsec\" points=\"240,180 240,106.7 292.1,149.9\" fill=\"#4BE0C33D\"/>\n <line class=\"lift\" x1=\"240\" y1=\"106.7\" x2=\"292.1\" y2=\"149.9\" stroke=\"#2E8274\" stroke-width=\"3.5\" opacity=\".25\" stroke-linecap=\"round\"/>\n <line class=\"edge\" x1=\"240\" y1=\"106.7\" x2=\"292.1\" y2=\"149.9\" stroke=\"#4BE0C3\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </g>\n <g class=\"sec s2\">\n <polygon class=\"fillsec\" points=\"240,180 292.1,149.9 297.8,213.4\" fill=\"#4BE0C33D\"/>\n <line class=\"lift\" x1=\"292.1\" y1=\"149.9\" x2=\"297.8\" y2=\"213.4\" stroke=\"#2E8274\" stroke-width=\"3.5\" opacity=\".25\" stroke-linecap=\"round\"/>\n <line class=\"edge\" x1=\"292.1\" y1=\"149.9\" x2=\"297.8\" y2=\"213.4\" stroke=\"#4BE0C3\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </g>\n <g class=\"sec s3\">\n <polygon class=\"fillsec\" points=\"240,180 297.8,213.4 240,231.7\" fill=\"#4BE0C33D\"/>\n <line class=\"lift\" x1=\"297.8\" y1=\"213.4\" x2=\"240\" y2=\"231.7\" stroke=\"#2E8274\" stroke-width=\"3.5\" opacity=\".25\" stroke-linecap=\"round\"/>\n <line class=\"edge\" x1=\"297.8\" y1=\"213.4\" x2=\"240\" y2=\"231.7\" stroke=\"#4BE0C3\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </g>\n <g class=\"sec s4\">\n <polygon class=\"fillsec\" points=\"240,180 240,231.7 173.2,218.5\" fill=\"#4BE0C33D\"/>\n <line class=\"lift\" x1=\"240\" y1=\"231.7\" x2=\"173.2\" y2=\"218.5\" stroke=\"#2E8274\" stroke-width=\"3.5\" opacity=\".25\" stroke-linecap=\"round\"/>\n <line class=\"edge\" x1=\"240\" y1=\"231.7\" x2=\"173.2\" y2=\"218.5\" stroke=\"#4BE0C3\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </g>\n <g class=\"sec s5\">\n <polygon class=\"fillsec\" points=\"240,180 173.2,218.5 191.2,151.8\" fill=\"#4BE0C33D\"/>\n <line class=\"lift\" x1=\"173.2\" y1=\"218.5\" x2=\"191.2\" y2=\"151.8\" stroke=\"#2E8274\" stroke-width=\"3.5\" opacity=\".25\" stroke-linecap=\"round\"/>\n <line class=\"edge\" x1=\"173.2\" y1=\"218.5\" x2=\"191.2\" y2=\"151.8\" stroke=\"#4BE0C3\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </g>\n <g class=\"sec s6\">\n <polygon class=\"fillsec\" points=\"240,180 191.2,151.8 240,106.7\" fill=\"#4BE0C33D\"/>\n <line class=\"lift\" x1=\"191.2\" y1=\"151.8\" x2=\"240\" y2=\"106.7\" stroke=\"#2E8274\" stroke-width=\"3.5\" opacity=\".25\" stroke-linecap=\"round\"/>\n <line class=\"edge\" x1=\"191.2\" y1=\"151.8\" x2=\"240\" y2=\"106.7\" stroke=\"#4BE0C3\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </g>\n\n <!-- vertex markers: each scales up out of the card centre, clockwise from the top -->\n <g class=\"vtx v1\">\n <circle class=\"halo\" cx=\"240\" cy=\"106.7\" r=\"5\" fill=\"#4BE0C31F\"/>\n <circle class=\"dot\" cx=\"240\" cy=\"106.7\" r=\"2.4\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n </g>\n <g class=\"vtx v2\">\n <circle class=\"halo\" cx=\"292.1\" cy=\"149.9\" r=\"5\" fill=\"#4BE0C31F\"/>\n <circle class=\"dot\" cx=\"292.1\" cy=\"149.9\" r=\"2.4\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n </g>\n <g class=\"vtx v3\">\n <circle class=\"halo\" cx=\"297.8\" cy=\"213.4\" r=\"5\" fill=\"#4BE0C31F\"/>\n <circle class=\"dot\" cx=\"297.8\" cy=\"213.4\" r=\"2.4\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n </g>\n <g class=\"vtx v4\">\n <circle class=\"halo\" cx=\"240\" cy=\"231.7\" r=\"5\" fill=\"#4BE0C31F\"/>\n <circle class=\"dot\" cx=\"240\" cy=\"231.7\" r=\"2.4\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n </g>\n <g class=\"vtx v5\">\n <circle class=\"halo\" cx=\"173.2\" cy=\"218.5\" r=\"5\" fill=\"#4BE0C31F\"/>\n <circle class=\"dot\" cx=\"173.2\" cy=\"218.5\" r=\"2.4\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n </g>\n <g class=\"vtx v6\">\n <circle class=\"halo\" cx=\"191.2\" cy=\"151.8\" r=\"5\" fill=\"#4BE0C31F\"/>\n <circle class=\"dot\" cx=\"191.2\" cy=\"151.8\" r=\"2.4\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n </g>\n</svg>\n";
export function ShareOfVoiceRadarCard(props: HTMLAttributes<HTMLDivElement>) {
return <div {...props} dangerouslySetInnerHTML={{ __html: svg }} />;
}
export default ShareOfVoiceRadarCard;
<!-- 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 360\" role=\"img\" aria-label=\"Radar graphic — decorative\" class=\"lk-block\" data-lk=\"radar-sov-card\" data-lk-contract=\"1\">\n <title>Radar graphic</title>\n <desc>Decorative radar 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=\"radar-sov-card\"] {\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=\"radar-sov-card\"] text,\n [data-lk=\"radar-sov-card\"] tspan { fill: var(--_i); }\n\n\n /* Layer 3: block-specific — every selector MUST start with [data-lk=\"radar-sov-card\"] */\n [data-lk=\"radar-sov-card\"] .card { fill: var(--_surf); stroke: var(--_hair); rx: var(--_radius); }\n [data-lk=\"radar-sov-card\"] .grid { fill: none; stroke: var(--_g); stroke-width: 1; }\n [data-lk=\"radar-sov-card\"] .cmp { fill: none; stroke: var(--_i3); stroke-width: 1; stroke-dasharray: 4 3; stroke-linejoin: round; }\n [data-lk=\"radar-sov-card\"] .fillsec { fill: var(--_soft); stroke: none; }\n [data-lk=\"radar-sov-card\"] .lift { stroke: var(--_glow); stroke-width: 3.5; opacity: .25; }\n [data-lk=\"radar-sov-card\"] .edge { stroke: var(--_accent); stroke-width: 1.5; }\n [data-lk=\"radar-sov-card\"] .halo { fill: var(--_faint); }\n [data-lk=\"radar-sov-card\"] .dot { fill: var(--_surf); stroke: var(--_accent); stroke-width: 1.5; }\n\n /* Hover motion (opt-out): everything starts gathered at the centre, then unfurls\n clockwise from the top. Each fill wedge + its outline edge scales up out of the centre\n in clockwise order (so the painted area is always what the appeared dots enclose), and\n each dot scales up out of the centre in the same order. Off for reduced-motion\n visitors; set the motion token to 0 to force off. */\n [data-lk=\"radar-sov-card\"] .sec,\n [data-lk=\"radar-sov-card\"] .vtx { transform-box: view-box; transform-origin: 240px 180px; }\n @media (prefers-reduced-motion: no-preference) {\n [data-lk=\"radar-sov-card\"] .cmp { opacity: 0; }\n [data-lk=\"radar-sov-card\"]:hover .cmp { animation: lk-radar-sov-card-fade calc(var(--lk-motion, 1) * .7s) ease-out both; }\n [data-lk=\"radar-sov-card\"]:hover .sec { animation: lk-radar-sov-card-grow calc(var(--lk-motion, 1) * .38s) cubic-bezier(.22,.61,.36,1) both; }\n [data-lk=\"radar-sov-card\"]:hover .vtx { animation: lk-radar-sov-card-pop calc(var(--lk-motion, 1) * .34s) cubic-bezier(.22,.61,.36,1) both; }\n [data-lk=\"radar-sov-card\"]:hover .s1 { animation-delay: calc(var(--lk-motion, 1) * 0.14s); }\n [data-lk=\"radar-sov-card\"]:hover .s2 { animation-delay: calc(var(--lk-motion, 1) * 0.28s); }\n [data-lk=\"radar-sov-card\"]:hover .s3 { animation-delay: calc(var(--lk-motion, 1) * 0.42s); }\n [data-lk=\"radar-sov-card\"]:hover .s4 { animation-delay: calc(var(--lk-motion, 1) * 0.56s); }\n [data-lk=\"radar-sov-card\"]:hover .s5 { animation-delay: calc(var(--lk-motion, 1) * 0.7s); }\n [data-lk=\"radar-sov-card\"]:hover .s6 { animation-delay: calc(var(--lk-motion, 1) * 0.7s); }\n [data-lk=\"radar-sov-card\"]:hover .v1 { animation-delay: calc(var(--lk-motion, 1) * 0s); }\n [data-lk=\"radar-sov-card\"]:hover .v2 { animation-delay: calc(var(--lk-motion, 1) * 0.14s); }\n [data-lk=\"radar-sov-card\"]:hover .v3 { animation-delay: calc(var(--lk-motion, 1) * 0.28s); }\n [data-lk=\"radar-sov-card\"]:hover .v4 { animation-delay: calc(var(--lk-motion, 1) * 0.42s); }\n [data-lk=\"radar-sov-card\"]:hover .v5 { animation-delay: calc(var(--lk-motion, 1) * 0.56s); }\n [data-lk=\"radar-sov-card\"]:hover .v6 { animation-delay: calc(var(--lk-motion, 1) * 0.7s); }\n }\n @keyframes lk-radar-sov-card-grow { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }\n @keyframes lk-radar-sov-card-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }\n @keyframes lk-radar-sov-card-fade { from { opacity: 0; } to { opacity: 1; } }\n </style>\n <rect class=\"card\" x=\".5\" y=\".5\" width=\"479\" height=\"359\" rx=\"12\" fill=\"#0E141B\" stroke=\"#1A2128\"/>\n\n <!-- graticule bed: 3 hex rings + 6 spokes + réseau crosses, all on the grid token (silenced when lk-grid is transparent) -->\n <polygon class=\"grid\" points=\"240,148.7 267.1,164.3 267.1,195.7 240,211.3 212.9,195.7 212.9,164.3\" fill=\"none\" stroke=\"#1C262C\" stroke-width=\"1\"/>\n <polygon class=\"grid\" points=\"240,117.3 294.3,148.7 294.3,211.3 240,242.7 185.7,211.3 185.7,148.7\" fill=\"none\" stroke=\"#1C262C\" stroke-width=\"1\"/>\n <polygon class=\"grid\" points=\"240,86 321.4,133 321.4,227 240,274 158.6,227 158.6,133\" fill=\"none\" stroke=\"#1C262C\" stroke-width=\"1\"/>\n <path class=\"grid\" d=\"M240 180L240 86M240 180L321.4 133M240 180L321.4 227M240 180L240 274M240 180L158.6 227M240 180L158.6 133\" fill=\"none\" stroke=\"#1C262C\" stroke-width=\"1\"/>\n <path class=\"grid\" d=\"M52 96h6M55 93v6M422 96h6M425 93v6M52 268h6M55 265v6M422 268h6M425 265v6\" fill=\"none\" stroke=\"#1C262C\" stroke-width=\"1\"/>\n\n <!-- comparison polygon (dashed, background reference) -->\n <polygon class=\"cmp\" points=\"240,122.7 297,147.1 282.3,204.4 240,225.1 193.6,206.8 186.3,149\" fill=\"none\" stroke=\"#E6EDEE6B\" stroke-width=\"1\" stroke-dasharray=\"4 3\"/>\n\n <!-- fill wedges + outline edges: 6 centre-fan sectors, each scales out clockwise -->\n <g class=\"sec s1\">\n <polygon class=\"fillsec\" points=\"240,180 240,106.7 292.1,149.9\" fill=\"#4BE0C33D\"/>\n <line class=\"lift\" x1=\"240\" y1=\"106.7\" x2=\"292.1\" y2=\"149.9\" stroke=\"#2E8274\" stroke-width=\"3.5\" opacity=\".25\" stroke-linecap=\"round\"/>\n <line class=\"edge\" x1=\"240\" y1=\"106.7\" x2=\"292.1\" y2=\"149.9\" stroke=\"#4BE0C3\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </g>\n <g class=\"sec s2\">\n <polygon class=\"fillsec\" points=\"240,180 292.1,149.9 297.8,213.4\" fill=\"#4BE0C33D\"/>\n <line class=\"lift\" x1=\"292.1\" y1=\"149.9\" x2=\"297.8\" y2=\"213.4\" stroke=\"#2E8274\" stroke-width=\"3.5\" opacity=\".25\" stroke-linecap=\"round\"/>\n <line class=\"edge\" x1=\"292.1\" y1=\"149.9\" x2=\"297.8\" y2=\"213.4\" stroke=\"#4BE0C3\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </g>\n <g class=\"sec s3\">\n <polygon class=\"fillsec\" points=\"240,180 297.8,213.4 240,231.7\" fill=\"#4BE0C33D\"/>\n <line class=\"lift\" x1=\"297.8\" y1=\"213.4\" x2=\"240\" y2=\"231.7\" stroke=\"#2E8274\" stroke-width=\"3.5\" opacity=\".25\" stroke-linecap=\"round\"/>\n <line class=\"edge\" x1=\"297.8\" y1=\"213.4\" x2=\"240\" y2=\"231.7\" stroke=\"#4BE0C3\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </g>\n <g class=\"sec s4\">\n <polygon class=\"fillsec\" points=\"240,180 240,231.7 173.2,218.5\" fill=\"#4BE0C33D\"/>\n <line class=\"lift\" x1=\"240\" y1=\"231.7\" x2=\"173.2\" y2=\"218.5\" stroke=\"#2E8274\" stroke-width=\"3.5\" opacity=\".25\" stroke-linecap=\"round\"/>\n <line class=\"edge\" x1=\"240\" y1=\"231.7\" x2=\"173.2\" y2=\"218.5\" stroke=\"#4BE0C3\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </g>\n <g class=\"sec s5\">\n <polygon class=\"fillsec\" points=\"240,180 173.2,218.5 191.2,151.8\" fill=\"#4BE0C33D\"/>\n <line class=\"lift\" x1=\"173.2\" y1=\"218.5\" x2=\"191.2\" y2=\"151.8\" stroke=\"#2E8274\" stroke-width=\"3.5\" opacity=\".25\" stroke-linecap=\"round\"/>\n <line class=\"edge\" x1=\"173.2\" y1=\"218.5\" x2=\"191.2\" y2=\"151.8\" stroke=\"#4BE0C3\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </g>\n <g class=\"sec s6\">\n <polygon class=\"fillsec\" points=\"240,180 191.2,151.8 240,106.7\" fill=\"#4BE0C33D\"/>\n <line class=\"lift\" x1=\"191.2\" y1=\"151.8\" x2=\"240\" y2=\"106.7\" stroke=\"#2E8274\" stroke-width=\"3.5\" opacity=\".25\" stroke-linecap=\"round\"/>\n <line class=\"edge\" x1=\"191.2\" y1=\"151.8\" x2=\"240\" y2=\"106.7\" stroke=\"#4BE0C3\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </g>\n\n <!-- vertex markers: each scales up out of the card centre, clockwise from the top -->\n <g class=\"vtx v1\">\n <circle class=\"halo\" cx=\"240\" cy=\"106.7\" r=\"5\" fill=\"#4BE0C31F\"/>\n <circle class=\"dot\" cx=\"240\" cy=\"106.7\" r=\"2.4\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n </g>\n <g class=\"vtx v2\">\n <circle class=\"halo\" cx=\"292.1\" cy=\"149.9\" r=\"5\" fill=\"#4BE0C31F\"/>\n <circle class=\"dot\" cx=\"292.1\" cy=\"149.9\" r=\"2.4\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n </g>\n <g class=\"vtx v3\">\n <circle class=\"halo\" cx=\"297.8\" cy=\"213.4\" r=\"5\" fill=\"#4BE0C31F\"/>\n <circle class=\"dot\" cx=\"297.8\" cy=\"213.4\" r=\"2.4\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n </g>\n <g class=\"vtx v4\">\n <circle class=\"halo\" cx=\"240\" cy=\"231.7\" r=\"5\" fill=\"#4BE0C31F\"/>\n <circle class=\"dot\" cx=\"240\" cy=\"231.7\" r=\"2.4\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n </g>\n <g class=\"vtx v5\">\n <circle class=\"halo\" cx=\"173.2\" cy=\"218.5\" r=\"5\" fill=\"#4BE0C31F\"/>\n <circle class=\"dot\" cx=\"173.2\" cy=\"218.5\" r=\"2.4\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n </g>\n <g class=\"vtx v6\">\n <circle class=\"halo\" cx=\"191.2\" cy=\"151.8\" r=\"5\" fill=\"#4BE0C31F\"/>\n <circle class=\"dot\" cx=\"191.2\" cy=\"151.8\" r=\"2.4\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\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 360" role="img" aria-label="Radar graphic — decorative" class="lk-block" data-lk="radar-sov-card" data-lk-contract="1">
<title>Radar graphic</title>
<desc>Decorative radar graphic. Illustrative shape only; any implied data is fictional.</desc>
<style>
/* lk-contract v1 — synced from blocks/_contract/header.css */
[data-lk="radar-sov-card"] {
--_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="radar-sov-card"] text,
[data-lk="radar-sov-card"] tspan { fill: var(--_i); }
/* Layer 3: block-specific — every selector MUST start with [data-lk="radar-sov-card"] */
[data-lk="radar-sov-card"] .card { fill: var(--_surf); stroke: var(--_hair); rx: var(--_radius); }
[data-lk="radar-sov-card"] .grid { fill: none; stroke: var(--_g); stroke-width: 1; }
[data-lk="radar-sov-card"] .cmp { fill: none; stroke: var(--_i3); stroke-width: 1; stroke-dasharray: 4 3; stroke-linejoin: round; }
[data-lk="radar-sov-card"] .fillsec { fill: var(--_soft); stroke: none; }
[data-lk="radar-sov-card"] .lift { stroke: var(--_glow); stroke-width: 3.5; opacity: .25; }
[data-lk="radar-sov-card"] .edge { stroke: var(--_accent); stroke-width: 1.5; }
[data-lk="radar-sov-card"] .halo { fill: var(--_faint); }
[data-lk="radar-sov-card"] .dot { fill: var(--_surf); stroke: var(--_accent); stroke-width: 1.5; }
/* Hover motion (opt-out): everything starts gathered at the centre, then unfurls
clockwise from the top. Each fill wedge + its outline edge scales up out of the centre
in clockwise order (so the painted area is always what the appeared dots enclose), and
each dot scales up out of the centre in the same order. Off for reduced-motion
visitors; set the motion token to 0 to force off. */
[data-lk="radar-sov-card"] .sec,
[data-lk="radar-sov-card"] .vtx { transform-box: view-box; transform-origin: 240px 180px; }
@media (prefers-reduced-motion: no-preference) {
[data-lk="radar-sov-card"] .cmp { opacity: 0; }
[data-lk="radar-sov-card"]:hover .cmp { animation: lk-radar-sov-card-fade calc(var(--lk-motion, 1) * .7s) ease-out both; }
[data-lk="radar-sov-card"]:hover .sec { animation: lk-radar-sov-card-grow calc(var(--lk-motion, 1) * .38s) cubic-bezier(.22,.61,.36,1) both; }
[data-lk="radar-sov-card"]:hover .vtx { animation: lk-radar-sov-card-pop calc(var(--lk-motion, 1) * .34s) cubic-bezier(.22,.61,.36,1) both; }
[data-lk="radar-sov-card"]:hover .s1 { animation-delay: calc(var(--lk-motion, 1) * 0.14s); }
[data-lk="radar-sov-card"]:hover .s2 { animation-delay: calc(var(--lk-motion, 1) * 0.28s); }
[data-lk="radar-sov-card"]:hover .s3 { animation-delay: calc(var(--lk-motion, 1) * 0.42s); }
[data-lk="radar-sov-card"]:hover .s4 { animation-delay: calc(var(--lk-motion, 1) * 0.56s); }
[data-lk="radar-sov-card"]:hover .s5 { animation-delay: calc(var(--lk-motion, 1) * 0.7s); }
[data-lk="radar-sov-card"]:hover .s6 { animation-delay: calc(var(--lk-motion, 1) * 0.7s); }
[data-lk="radar-sov-card"]:hover .v1 { animation-delay: calc(var(--lk-motion, 1) * 0s); }
[data-lk="radar-sov-card"]:hover .v2 { animation-delay: calc(var(--lk-motion, 1) * 0.14s); }
[data-lk="radar-sov-card"]:hover .v3 { animation-delay: calc(var(--lk-motion, 1) * 0.28s); }
[data-lk="radar-sov-card"]:hover .v4 { animation-delay: calc(var(--lk-motion, 1) * 0.42s); }
[data-lk="radar-sov-card"]:hover .v5 { animation-delay: calc(var(--lk-motion, 1) * 0.56s); }
[data-lk="radar-sov-card"]:hover .v6 { animation-delay: calc(var(--lk-motion, 1) * 0.7s); }
}
@keyframes lk-radar-sov-card-grow { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes lk-radar-sov-card-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes lk-radar-sov-card-fade { from { opacity: 0; } to { opacity: 1; } }
</style>
<rect class="card" x=".5" y=".5" width="479" height="359" rx="12" fill="#0E141B" stroke="#1A2128"/>
<!-- graticule bed: 3 hex rings + 6 spokes + réseau crosses, all on the grid token (silenced when lk-grid is transparent) -->
<polygon class="grid" points="240,148.7 267.1,164.3 267.1,195.7 240,211.3 212.9,195.7 212.9,164.3" fill="none" stroke="#1C262C" stroke-width="1"/>
<polygon class="grid" points="240,117.3 294.3,148.7 294.3,211.3 240,242.7 185.7,211.3 185.7,148.7" fill="none" stroke="#1C262C" stroke-width="1"/>
<polygon class="grid" points="240,86 321.4,133 321.4,227 240,274 158.6,227 158.6,133" fill="none" stroke="#1C262C" stroke-width="1"/>
<path class="grid" d="M240 180L240 86M240 180L321.4 133M240 180L321.4 227M240 180L240 274M240 180L158.6 227M240 180L158.6 133" fill="none" stroke="#1C262C" stroke-width="1"/>
<path class="grid" d="M52 96h6M55 93v6M422 96h6M425 93v6M52 268h6M55 265v6M422 268h6M425 265v6" fill="none" stroke="#1C262C" stroke-width="1"/>
<!-- comparison polygon (dashed, background reference) -->
<polygon class="cmp" points="240,122.7 297,147.1 282.3,204.4 240,225.1 193.6,206.8 186.3,149" fill="none" stroke="#E6EDEE6B" stroke-width="1" stroke-dasharray="4 3"/>
<!-- fill wedges + outline edges: 6 centre-fan sectors, each scales out clockwise -->
<g class="sec s1">
<polygon class="fillsec" points="240,180 240,106.7 292.1,149.9" fill="#4BE0C33D"/>
<line class="lift" x1="240" y1="106.7" x2="292.1" y2="149.9" stroke="#2E8274" stroke-width="3.5" opacity=".25" stroke-linecap="round"/>
<line class="edge" x1="240" y1="106.7" x2="292.1" y2="149.9" stroke="#4BE0C3" stroke-width="1.5" stroke-linecap="round"/>
</g>
<g class="sec s2">
<polygon class="fillsec" points="240,180 292.1,149.9 297.8,213.4" fill="#4BE0C33D"/>
<line class="lift" x1="292.1" y1="149.9" x2="297.8" y2="213.4" stroke="#2E8274" stroke-width="3.5" opacity=".25" stroke-linecap="round"/>
<line class="edge" x1="292.1" y1="149.9" x2="297.8" y2="213.4" stroke="#4BE0C3" stroke-width="1.5" stroke-linecap="round"/>
</g>
<g class="sec s3">
<polygon class="fillsec" points="240,180 297.8,213.4 240,231.7" fill="#4BE0C33D"/>
<line class="lift" x1="297.8" y1="213.4" x2="240" y2="231.7" stroke="#2E8274" stroke-width="3.5" opacity=".25" stroke-linecap="round"/>
<line class="edge" x1="297.8" y1="213.4" x2="240" y2="231.7" stroke="#4BE0C3" stroke-width="1.5" stroke-linecap="round"/>
</g>
<g class="sec s4">
<polygon class="fillsec" points="240,180 240,231.7 173.2,218.5" fill="#4BE0C33D"/>
<line class="lift" x1="240" y1="231.7" x2="173.2" y2="218.5" stroke="#2E8274" stroke-width="3.5" opacity=".25" stroke-linecap="round"/>
<line class="edge" x1="240" y1="231.7" x2="173.2" y2="218.5" stroke="#4BE0C3" stroke-width="1.5" stroke-linecap="round"/>
</g>
<g class="sec s5">
<polygon class="fillsec" points="240,180 173.2,218.5 191.2,151.8" fill="#4BE0C33D"/>
<line class="lift" x1="173.2" y1="218.5" x2="191.2" y2="151.8" stroke="#2E8274" stroke-width="3.5" opacity=".25" stroke-linecap="round"/>
<line class="edge" x1="173.2" y1="218.5" x2="191.2" y2="151.8" stroke="#4BE0C3" stroke-width="1.5" stroke-linecap="round"/>
</g>
<g class="sec s6">
<polygon class="fillsec" points="240,180 191.2,151.8 240,106.7" fill="#4BE0C33D"/>
<line class="lift" x1="191.2" y1="151.8" x2="240" y2="106.7" stroke="#2E8274" stroke-width="3.5" opacity=".25" stroke-linecap="round"/>
<line class="edge" x1="191.2" y1="151.8" x2="240" y2="106.7" stroke="#4BE0C3" stroke-width="1.5" stroke-linecap="round"/>
</g>
<!-- vertex markers: each scales up out of the card centre, clockwise from the top -->
<g class="vtx v1">
<circle class="halo" cx="240" cy="106.7" r="5" fill="#4BE0C31F"/>
<circle class="dot" cx="240" cy="106.7" r="2.4" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
</g>
<g class="vtx v2">
<circle class="halo" cx="292.1" cy="149.9" r="5" fill="#4BE0C31F"/>
<circle class="dot" cx="292.1" cy="149.9" r="2.4" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
</g>
<g class="vtx v3">
<circle class="halo" cx="297.8" cy="213.4" r="5" fill="#4BE0C31F"/>
<circle class="dot" cx="297.8" cy="213.4" r="2.4" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
</g>
<g class="vtx v4">
<circle class="halo" cx="240" cy="231.7" r="5" fill="#4BE0C31F"/>
<circle class="dot" cx="240" cy="231.7" r="2.4" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
</g>
<g class="vtx v5">
<circle class="halo" cx="173.2" cy="218.5" r="5" fill="#4BE0C31F"/>
<circle class="dot" cx="173.2" cy="218.5" r="2.4" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
</g>
<g class="vtx v6">
<circle class="halo" cx="191.2" cy="151.8" r="5" fill="#4BE0C31F"/>
<circle class="dot" cx="191.2" cy="151.8" r="2.4" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
</g>
</svg>
</div>