mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fix: svg stroke width

Browse Source
This commit is contained in:
Marc Mintel
2026-02-20 18:48:10 +01:00
parent 1dd74a3861
commit 8c08b552cf
1 changed files with 15 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
components/home/HeroIllustration.tsx
View File

@@ -127,6 +127,7 @@ export default function HeroIllustration() {
const viewBox = isMobile ? '400 0 1000 1100' : '-400 -200 1800 1100'; const viewBox = isMobile ? '400 0 1000 1100' : '-400 -200 1800 1100';
const scale = isMobile ? 1.44 : 1; const scale = isMobile ? 1.44 : 1;
const opacity = isMobile ? 0.6 : 0.85; const opacity = isMobile ? 0.6 : 0.85;
const strokeMultiplier = isMobile ? 2.5 : 1;
return ( return (
<div className="absolute inset-0 z-0 overflow-visible bg-primary w-full h-full"> <div className="absolute inset-0 z-0 overflow-visible bg-primary w-full h-full">
@@ -184,7 +185,7 @@ export default function HeroIllustration() {
x2={end.x} x2={end.x}
y2={end.y} y2={end.y}
stroke="white" stroke="white"
strokeWidth="1" strokeWidth={1 * strokeMultiplier}
/> />
); );
})} })}
@@ -199,14 +200,14 @@ export default function HeroIllustration() {
x2={end.x} x2={end.x}
y2={end.y} y2={end.y}
stroke="white" stroke="white"
strokeWidth="1" strokeWidth={1 * strokeMultiplier}
/> />
); );
})} })}
</g> </g>
{/* POWER LINES */} {/* POWER LINES */}
<g stroke="white" strokeWidth="2" strokeOpacity="0.2"> <g stroke="white" strokeWidth={2 * strokeMultiplier} strokeOpacity="0.2">
{POWER_LINES.map((line, i) => { {POWER_LINES.map((line, i) => {
const from = gridToScreen(line.from.col, line.from.row); const from = gridToScreen(line.from.col, line.from.row);
const to = gridToScreen(line.to.col, line.to.row); const to = gridToScreen(line.to.col, line.to.row);
@@ -230,7 +231,7 @@ export default function HeroIllustration() {
x2={to.x} x2={to.x}
y2={to.y} y2={to.y}
stroke="url(#energy-pulse)" stroke="url(#energy-pulse)"
strokeWidth="3" strokeWidth={3 * strokeMultiplier}
strokeLinecap="round" strokeLinecap="round"
style={{ style={{
strokeDasharray: `${length * 0.2} ${length * 0.8}`, strokeDasharray: `${length * 0.2} ${length * 0.8}`,
@@ -252,7 +253,7 @@ export default function HeroIllustration() {
fill="white" fill="white"
fillOpacity="0.05" fillOpacity="0.05"
stroke="white" stroke="white"
strokeWidth="1" strokeWidth={1 * strokeMultiplier}
strokeOpacity="0.2" strokeOpacity="0.2"
/> />
<path <path
@@ -260,7 +261,7 @@ export default function HeroIllustration() {
fill="white" fill="white"
fillOpacity="0.1" fillOpacity="0.1"
stroke="white" stroke="white"
strokeWidth="1" strokeWidth={1 * strokeMultiplier}
strokeOpacity="0.3" strokeOpacity="0.3"
/> />
<circle <circle
@@ -285,7 +286,7 @@ export default function HeroIllustration() {
x2="0" x2="0"
y2="-60" y2="-60"
stroke="white" stroke="white"
strokeWidth="2" strokeWidth={2 * strokeMultiplier}
strokeOpacity="0.3" strokeOpacity="0.3"
/> />
<g transform="translate(0, -60)"> <g transform="translate(0, -60)">
@@ -303,7 +304,7 @@ export default function HeroIllustration() {
x2="0" x2="0"
y2="-30" y2="-30"
stroke="white" stroke="white"
strokeWidth="1.5" strokeWidth={1.5 * strokeMultiplier}
strokeOpacity="0.4" strokeOpacity="0.4"
transform={`rotate(${angle})`} transform={`rotate(${angle})`}
/> />
@@ -325,7 +326,7 @@ export default function HeroIllustration() {
fill="white" fill="white"
fillOpacity="0.05" fillOpacity="0.05"
stroke="white" stroke="white"
strokeWidth="1" strokeWidth={1 * strokeMultiplier}
strokeOpacity="0.2" strokeOpacity="0.2"
/> />
<path <path
@@ -337,7 +338,7 @@ export default function HeroIllustration() {
fill="white" fill="white"
fillOpacity="0.08" fillOpacity="0.08"
stroke="white" stroke="white"
strokeWidth="1" strokeWidth={1 * strokeMultiplier}
strokeOpacity="0.3" strokeOpacity="0.3"
/> />
</g> </g>
@@ -352,7 +353,7 @@ export default function HeroIllustration() {
<path <path
d="M -6 0 L -3 -45 M 6 0 L 3 -45" d="M -6 0 L -3 -45 M 6 0 L 3 -45"
stroke="white" stroke="white"
strokeWidth="1.5" strokeWidth={1.5 * strokeMultiplier}
strokeOpacity="0.3" strokeOpacity="0.3"
/> />
<line <line
@@ -361,7 +362,7 @@ export default function HeroIllustration() {
x2="12" x2="12"
y2="-40" y2="-40"
stroke="white" stroke="white"
strokeWidth="1" strokeWidth={1 * strokeMultiplier}
strokeOpacity="0.2" strokeOpacity="0.2"
/> />
</g> </g>
@@ -380,7 +381,7 @@ export default function HeroIllustration() {
fill="white" fill="white"
fillOpacity="0.08" fillOpacity="0.08"
stroke="white" stroke="white"
strokeWidth="1" strokeWidth={1 * strokeMultiplier}
strokeOpacity="0.2" strokeOpacity="0.2"
/> />
<path <path
@@ -388,7 +389,7 @@ export default function HeroIllustration() {
fill="white" fill="white"
fillOpacity="0.05" fillOpacity="0.05"
stroke="white" stroke="white"
strokeWidth="1" strokeWidth={1 * strokeMultiplier}
strokeOpacity="0.15" strokeOpacity="0.15"
/> />
</g> </g>