<p></p>
<p dir="auto">I've looked at a few options for dimming and inverting involving SVG filters.</p>
<markdown-accessiblity-table><table role="table">
<thead>
<tr>
<th>no filter</th>
<th>current</th>
<th>heavy</th>
<th>gamma</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://github.com/user-attachments/assets/524b5a47-a264-43d0-a1b7-5710592807dc">www.openstreetmap.org_.png (view on web)</a></td>
<td><a href="https://github.com/user-attachments/assets/91240fb7-efae-4d85-bdd1-85ab6e50ae2a">www.openstreetmap.org_.1.png (view on web)</a></td>
<td><a href="https://github.com/user-attachments/assets/37e5772f-a2fd-4b8f-9418-293f1f013a89">www.openstreetmap.org_.2.png (view on web)</a></td>
<td><a href="https://github.com/user-attachments/assets/6256f89b-a759-486c-a265-d932dd9846ac">www.openstreetmap.org_.3.png (view on web)</a></td>
</tr>
<tr>
<td><a href="https://github.com/user-attachments/assets/431d5a65-2e92-449f-a98d-4527fb112eaa">www.openstreetmap.org_.4.png (view on web)</a></td>
<td><a href="https://github.com/user-attachments/assets/aaeba012-9c4c-4ae4-9052-2e173e9bdf53">www.openstreetmap.org_.5.png (view on web)</a></td>
<td><a href="https://github.com/user-attachments/assets/061022ad-29da-4378-9ed4-3e595005b73d">www.openstreetmap.org_.6.png (view on web)</a></td>
<td><a href="https://github.com/user-attachments/assets/61764955-2c7b-4489-8b30-f80c4a6e4a1d">www.openstreetmap.org_.7.png (view on web)</a></td>
</tr>
</tbody>
</table></markdown-accessiblity-table>
<p dir="auto">As expected, dimming with gamma yields a more natural result. While the gamma dim struggles a bit with the hill-shaded regions, the "heavy" <code class="notranslate">brightness(0.55) contrast(1.75)</code> combo obliterates them. You can see how gamma trades contrast in dark areas for contrast in light areas.<br>
The filter for the gamma dimming in <code class="notranslate">url(#gamma)contrast(95%)</code> is written like this:</p>
<div class="highlight highlight-text-xml-svg" dir="auto"><pre class="notranslate"><<span class="pl-ent">filter</span> <span class="pl-e">id</span>=<span class="pl-s"><span class="pl-pds">"</span>gamma<span class="pl-pds">"</span></span> <span class="pl-e">color-interpolation-filters</span>=<span class="pl-s"><span class="pl-pds">"</span>linearRGB<span class="pl-pds">"</span></span>>
<<span class="pl-ent">feComponentTransfer</span>>
<<span class="pl-ent">feFuncR</span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>gamma<span class="pl-pds">"</span></span> <span class="pl-e">exponent</span>=<span class="pl-s"><span class="pl-pds">"</span>2<span class="pl-pds">"</span></span>></<span class="pl-ent">feFuncR</span>>
<<span class="pl-ent">feFuncG</span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>gamma<span class="pl-pds">"</span></span> <span class="pl-e">exponent</span>=<span class="pl-s"><span class="pl-pds">"</span>2<span class="pl-pds">"</span></span>></<span class="pl-ent">feFuncG</span>>
<<span class="pl-ent">feFuncB</span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>gamma<span class="pl-pds">"</span></span> <span class="pl-e">exponent</span>=<span class="pl-s"><span class="pl-pds">"</span>2<span class="pl-pds">"</span></span>></<span class="pl-ent">feFuncB</span>>
<<span class="pl-ent">feFuncA</span>></<span class="pl-ent">feFuncA</span>>
</<span class="pl-ent">feComponentTransfer</span>>
</<span class="pl-ent">filter</span>></pre></div>
<hr>
<markdown-accessiblity-table><table role="table">
<thead>
<tr>
<th>no filter</th>
<th>standard</th>
<th>transformed</th>
<th>blended</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://github.com/user-attachments/assets/524b5a47-a264-43d0-a1b7-5710592807dc">www.openstreetmap.org_.png (view on web)</a></td>
<td><a href="https://github.com/user-attachments/assets/0d06f322-4a4f-46d0-aad9-9215a955436a">www.openstreetmap.org_.8.png (view on web)</a></td>
<td><a href="https://github.com/user-attachments/assets/5bc1ffb5-4958-4208-9956-1148561f29e4">www.openstreetmap.org_.9.png (view on web)</a></td>
<td><a href="https://github.com/user-attachments/assets/f5f6f11d-e3a4-4071-a030-5db197e198ae">www.openstreetmap.org_.10.png (view on web)</a></td>
</tr>
<tr>
<td><a href="https://github.com/user-attachments/assets/93a86cdb-74ae-4375-85e2-46534b356646">www.openstreetmap.org_.11.png (view on web)</a></td>
<td><a href="https://github.com/user-attachments/assets/20ee573a-c38f-4bfe-b55e-c62ba8baee4a">www.openstreetmap.org_.12.png (view on web)</a></td>
<td><a href="https://github.com/user-attachments/assets/ef25f0f3-a946-42eb-be66-a2f5d3abb0dd">www.openstreetmap.org_.13.png (view on web)</a></td>
<td><a href="https://github.com/user-attachments/assets/cd7d016f-0516-4578-b765-bee9cdc2483f">www.openstreetmap.org_.14.png (view on web)</a></td>
</tr>
</tbody>
</table></markdown-accessiblity-table>
<p dir="auto">Moving on to inverting, the <code class="notranslate">invert(95%)hue-rotate(180deg)</code> filter is the one that seems the most natural to me. The one featured in the previously mentioned article desaturates and brightens the background too much and, therefore, loses contrast, even with a gamma of only 0.15. Another I built on blending modes does this too, but with way more saturation (I already turned it down to 50% with <code class="notranslate">saturate(0.5)url(#invert-blend)</code>).</p>
<div class="highlight highlight-source-css" dir="auto"><pre class="notranslate"><<span class="pl-ent">filter</span> <span class="pl-ent">id</span><span class="pl-c1">=</span><span class="pl-s">"invert-transform"</span> <span class="pl-ent">color-interpolation-filters</span><span class="pl-c1">=</span><span class="pl-s">"linearRGB"</span><span class="pl-c1">></span>
<<span class="pl-ent">feComponentTransfer</span><span class="pl-c1">></span>
<<span class="pl-ent">feFuncR</span> <span class="pl-ent">type</span><span class="pl-c1">=</span><span class="pl-s">"gamma"</span> <span class="pl-ent">exponent</span><span class="pl-c1">=</span><span class="pl-s">"0.15"</span><span class="pl-c1">></span><<span class="pl-c1">/</span><span class="pl-ent">feFuncR</span><span class="pl-c1">></span>
<<span class="pl-ent">feFuncG</span> <span class="pl-ent">type</span><span class="pl-c1">=</span><span class="pl-s">"gamma"</span> <span class="pl-ent">exponent</span><span class="pl-c1">=</span><span class="pl-s">"0.15"</span><span class="pl-c1">></span><<span class="pl-c1">/</span><span class="pl-ent">feFuncG</span><span class="pl-c1">></span>
<<span class="pl-ent">feFuncB</span> <span class="pl-ent">type</span><span class="pl-c1">=</span><span class="pl-s">"gamma"</span> <span class="pl-ent">exponent</span><span class="pl-c1">=</span><span class="pl-s">"0.15"</span><span class="pl-c1">></span><<span class="pl-c1">/</span><span class="pl-ent">feFuncB</span><span class="pl-c1">></span>
<<span class="pl-ent">feFuncA</span> <span class="pl-ent">type</span><span class="pl-c1">=</span><span class="pl-s">"gamma"</span><span class="pl-c1">></span><<span class="pl-c1">/</span><span class="pl-ent">feFuncA</span><span class="pl-c1">></span>
<<span class="pl-c1">/</span><span class="pl-ent">feComponentTransfer</span><span class="pl-c1">></span>
<<span class="pl-ent">feColorMatrix</span> <span class="pl-ent">type</span><span class="pl-c1">=</span><span class="pl-s">"matrix"</span> <span class="pl-ent">values</span><span class="pl-c1">=</span><span class="pl-s">"0.4 -0.7 -0.7 0 1 -0.7 0.4 -0.7 0 1 -0.7 -0.7 0.4 0 1 0 0 0 1 0"</span><span class="pl-c1">></span><<span class="pl-c1">/</span><span class="pl-ent">feColorMatrix</span><span class="pl-c1">></span>
<<span class="pl-c1">/</span><span class="pl-ent">filter</span><span class="pl-c1">></span>
<<span class="pl-ent">filter</span> <span class="pl-ent">id</span><span class="pl-c1">=</span><span class="pl-s">"invert-blend"</span><span class="pl-c1">></span>
<<span class="pl-ent">feComponentTransfer</span><span class="pl-c1">></span>
<<span class="pl-ent">feFuncR</span> <span class="pl-ent">type</span><span class="pl-c1">=</span><span class="pl-s">"gamma"</span> <span class="pl-ent">exponent</span><span class="pl-c1">=</span><span class="pl-s">"0.2"</span><span class="pl-c1">></span><<span class="pl-c1">/</span><span class="pl-ent">feFuncR</span><span class="pl-c1">></span>
<<span class="pl-ent">feFuncG</span> <span class="pl-ent">type</span><span class="pl-c1">=</span><span class="pl-s">"gamma"</span> <span class="pl-ent">exponent</span><span class="pl-c1">=</span><span class="pl-s">"0.2"</span><span class="pl-c1">></span><<span class="pl-c1">/</span><span class="pl-ent">feFuncG</span><span class="pl-c1">></span>
<<span class="pl-ent">feFuncB</span> <span class="pl-ent">type</span><span class="pl-c1">=</span><span class="pl-s">"gamma"</span> <span class="pl-ent">exponent</span><span class="pl-c1">=</span><span class="pl-s">"0.2"</span><span class="pl-c1">></span><<span class="pl-c1">/</span><span class="pl-ent">feFuncB</span><span class="pl-c1">></span>
<<span class="pl-ent">feFuncA</span> <span class="pl-ent">type</span><span class="pl-c1">=</span><span class="pl-s">"gamma"</span><span class="pl-c1">></span><<span class="pl-c1">/</span><span class="pl-ent">feFuncA</span><span class="pl-c1">></span>
<<span class="pl-c1">/</span><span class="pl-ent">feComponentTransfer</span><span class="pl-c1">></span><<span class="pl-ent">feColorMatrix</span> <span class="pl-ent">values</span><span class="pl-c1">=</span><span class="pl-s">"-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"</span><span class="pl-c1">></span><<span class="pl-c1">/</span><span class="pl-ent">feColorMatrix</span><span class="pl-c1">></span>
<<span class="pl-ent">feBlend</span> <span class="pl-ent">mode</span><span class="pl-c1">=</span><span class="pl-s">"color"</span> <span class="pl-ent">in</span><span class="pl-c1">=</span><span class="pl-s">"SourceGraphic"</span><span class="pl-c1">></span><<span class="pl-c1">/</span><span class="pl-ent">feBlend</span><span class="pl-c1">></span>
<<span class="pl-c1">/</span><span class="pl-ent">filter</span><span class="pl-c1">></span></pre></div>
<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/issues/5328#issuecomment-2481193144">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLO3R3HTEKE55VJEMIT2BB4RTAVCNFSM6AAAAABR3CJSAOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIOBRGE4TGMJUGQ">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLLQVUIMFVNAFUAOJ6T2BB4RTA5CNFSM6AAAAABR3CJSAOWGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTUT4QALQ.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/issues/5328/2481193144</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/issues/5328#issuecomment-2481193144",
"url": "https://github.com/openstreetmap/openstreetmap-website/issues/5328#issuecomment-2481193144",
"name": "View Issue"
},
"description": "View this Issue on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>