import { useId, type ComponentProps } from "react"; import { cn } from "cn"; const WIDTH = 132; const SHELL = "M14 78C6 58 10 30 32 16C50 4 82 2 100 14C110 21 114 32 113 42L98 44C90 45 86 52 86 60C86 70 92 80 104 86L102 96C88 98 72 94 64 88C58 84 48 82 36 84C26 86 16 86 14 78Z"; /** The crown, back of the neck to the brow: where the centre stripe runs. */ const CROWN = "M14 78C6 58 10 30 32 16C50 4 82 2 100 14C110 21 114 32 113 42"; /** The bottom edge, chin to neck: the rubber trim. */ const TRIM = "M102 96C88 98 72 94 64 88C58 84 48 82 36 84C26 86 16 86 14 78"; const FACE = "M94 44L113 42C115 54 112 66 106 72L90 70C87 60 88 50 94 44Z"; const MASK = [ "M104 43C112 44 119 46 124 49C127 63 126 79 118 92C112 98 104 99 98 96", "M95 58L125 60", "M92 73L124 75", "M98 45C92 58 92 78 98 96", ]; export type HelmetProps = Omit, "color"> & { /** Shell colour. Any CSS colour. */ color: string; /** Painted on the side of the shell, e.g. `SEA`. */ label?: string; labelColor?: string; /** Tinted eye shield. Leave it out for a clear, dark face opening. */ visor?: string; /** Centre stripe over the crown. */ stripe?: string; /** Facemask bars. */ mask?: string; /** * Which way the facemask points. A matchup faces its helmets in: home * `right`, away `left`. The label is never mirrored. */ facing?: "left" | "right"; }; /** * A football helmet in side profile, painted from team colours at runtime, so * one drawing serves every team without shipping a logo per club. */ function Helmet({ color, label, labelColor = "#ffffff", visor, stripe, mask = "#e8eaee", facing = "right", className, ...props }: HelmetProps) { // Gradient and clip ids must be unique per instance on the page. const id = useId().replace(/[^\w-]/g, ""); const left = facing === "left"; const labelled = props["aria-label"] !== undefined; const labelX = left ? WIDTH - 54 : 54; return ( ); } export { Helmet };

Team colours

Code