lfg2025/kaiser-natron
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

brand hero: woman path uses nonzero fill so finger holes fill in

Browse Source 
Reordering layers didn't fix the white finger because the bleeding
area is a HOLE in the woman silhouette (evenodd cuts it out), not
geometry the mound is overrunning. With nonzero, even-odd subpath
holes fill in (assuming consistent winding), so the finger reads
mint and the mound only shows where the woman path doesn't cover.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-05-04 13:28:04 +01:00
parent b62f213a11
commit 5eafaecaf4
6 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
dist/assets/HomePage-8hGoCK2Z.css vendored Normal file
View File

@@ -0,0 +1 @@
@property --hero-feather{syntax:"<percentage>";inherits:false;initial-value:12%}.brand-hero__svg--bg[data-v-3da0d35a]{--hero-feather:12%;-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 var(--hero-feather), #000 calc(100% - var(--hero-feather)), transparent 100%);-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 var(--hero-feather), #000 calc(100% - var(--hero-feather)), transparent 100%);mask-image:linear-gradient(to right, transparent 0%, #000 var(--hero-feather), #000 calc(100% - var(--hero-feather)), transparent 100%);transition:--hero-feather .7s 1.15s;display:block}.brand-hero.go .brand-hero__svg--bg[data-v-3da0d35a]{--hero-feather:0%}.brand-hero__svg--portrait[data-v-3da0d35a]{width:100%;height:auto;max-height:56svh;margin:0 auto;display:block}.left-m[data-v-3da0d35a],.right-m[data-v-3da0d35a]{fill:#b5d8b6}.mound-m[data-v-3da0d35a]{fill:#fff}.layer.left-m[data-v-3da0d35a]{opacity:0;transition:transform .8s cubic-bezier(.22,.61,.36,1) .15s,opacity .6s .15s;transform:translate(-14%)}.layer.right-m[data-v-3da0d35a]{opacity:0;transition:transform .8s cubic-bezier(.22,.61,.36,1) .15s,opacity .6s .15s;transform:translate(14%)}.layer.mound-m[data-v-3da0d35a]{opacity:0;transition:opacity .55s .7s}.brand-hero__copy[data-v-3da0d35a]{opacity:0;transition:opacity .7s 1.15s}.brand-hero.go .layer.left-m[data-v-3da0d35a],.brand-hero.go .layer.right-m[data-v-3da0d35a]{opacity:1;transform:none}.brand-hero.go .layer.mound-m[data-v-3da0d35a],.brand-hero.go .brand-hero__copy[data-v-3da0d35a]{opacity:1}@media (prefers-reduced-motion:reduce){.layer.left-m[data-v-3da0d35a],.layer.right-m[data-v-3da0d35a],.layer.mound-m[data-v-3da0d35a],.brand-hero__copy[data-v-3da0d35a]{opacity:1!important;transition:none!important;transform:none!important}}

1
dist/assets/HomePage-B8FglSFF.css vendored
View File

@@ -1 +0,0 @@
@property --hero-feather{syntax:"<percentage>";inherits:false;initial-value:12%}.brand-hero__svg--bg[data-v-89be6d1f]{--hero-feather:12%;-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 var(--hero-feather), #000 calc(100% - var(--hero-feather)), transparent 100%);-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 var(--hero-feather), #000 calc(100% - var(--hero-feather)), transparent 100%);mask-image:linear-gradient(to right, transparent 0%, #000 var(--hero-feather), #000 calc(100% - var(--hero-feather)), transparent 100%);transition:--hero-feather .7s 1.15s;display:block}.brand-hero.go .brand-hero__svg--bg[data-v-89be6d1f]{--hero-feather:0%}.brand-hero__svg--portrait[data-v-89be6d1f]{width:100%;height:auto;max-height:56svh;margin:0 auto;display:block}.left-m[data-v-89be6d1f],.right-m[data-v-89be6d1f]{fill:#b5d8b6}.mound-m[data-v-89be6d1f]{fill:#fff}.layer.left-m[data-v-89be6d1f]{opacity:0;transition:transform .8s cubic-bezier(.22,.61,.36,1) .15s,opacity .6s .15s;transform:translate(-14%)}.layer.right-m[data-v-89be6d1f]{opacity:0;transition:transform .8s cubic-bezier(.22,.61,.36,1) .15s,opacity .6s .15s;transform:translate(14%)}.layer.mound-m[data-v-89be6d1f]{opacity:0;transition:opacity .55s .7s}.brand-hero__copy[data-v-89be6d1f]{opacity:0;transition:opacity .7s 1.15s}.brand-hero.go .layer.left-m[data-v-89be6d1f],.brand-hero.go .layer.right-m[data-v-89be6d1f]{opacity:1;transform:none}.brand-hero.go .layer.mound-m[data-v-89be6d1f],.brand-hero.go .brand-hero__copy[data-v-89be6d1f]{opacity:1}@media (prefers-reduced-motion:reduce){.layer.left-m[data-v-89be6d1f],.layer.right-m[data-v-89be6d1f],.layer.mound-m[data-v-89be6d1f],.brand-hero__copy[data-v-89be6d1f]{opacity:1!important;transition:none!important;transform:none!important}}

2
dist/assets/HomePage-DQ4v1ey2.js → dist/assets/HomePage-MOM69Egh.js vendored
View File

File diff suppressed because one or more lines are too long

4
dist/assets/index-pRYmfwS-.js → dist/assets/index-CUPoOaoP.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/index.html vendored
View File

@@ -12,7 +12,7 @@
href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,200;0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,200;1,9..144,400;1,9..144,600&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap"
rel="stylesheet"
/>
<script type="module" crossorigin src="/assets/index-pRYmfwS-.js"></script>
<script type="module" crossorigin src="/assets/index-CUPoOaoP.js"></script>
<link rel="modulepreload" crossorigin href="/assets/preload-helper-ca-nBW7U.js">
<link rel="modulepreload" crossorigin href="/assets/runtime-core.esm-bundler-DTXUv7Wx.js">
<link rel="modulepreload" crossorigin href="/assets/runtime-dom.esm-bundler-CXLmyuFK.js">

4
src/design-system/components/BrandHero.vue
View File

@@ -56,7 +56,7 @@
past the grip outline. -->
<path class="layer right-m" fill-rule="evenodd" :d="dPortRight" />
<path class="layer mound-m" fill-rule="evenodd" :d="dPortMound" />
<path class="layer left-m" fill-rule="evenodd" :d="dPortLeft" />
<path class="layer left-m" fill-rule="nonzero" :d="dPortLeft" />
</svg>
</div>
@@ -97,7 +97,7 @@
>
<path class="layer right-m" fill-rule="evenodd" :d="dPortRight" />
<path class="layer mound-m" fill-rule="evenodd" :d="dPortMound" />
<path class="layer left-m" fill-rule="evenodd" :d="dPortLeft" />
<path class="layer left-m" fill-rule="nonzero" :d="dPortLeft" />
</svg>
</div>