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