I've looked at a few options for dimming and inverting involving SVG filters.
| no filter | current | heavy | gamma |
|-|-|-|-|
| 
| 
| 
| 
|
| 
| 
| 
| 
|
As expected, dimming with gamma yields a more natural result. While the gamma
dim struggles a bit with the hill-shaded regions, the "heavy" `brightness(0.55)
contrast(1.75)` combo obliterates them. You can see how gamma trades contrast
in dark areas for contrast in light areas.
The filter for the gamma dimming in `url(#gamma)contrast(95%)` is written like
this:
```svg
<filter id="gamma" color-interpolation-filters="linearRGB">
<feComponentTransfer>
<feFuncR type="gamma" exponent="2"></feFuncR>
<feFuncG type="gamma" exponent="2"></feFuncG>
<feFuncB type="gamma" exponent="2"></feFuncB>
<feFuncA></feFuncA>
</feComponentTransfer>
</filter>
```
---
| no filter | standard | transformed | blended |
|-|-|-|-|
| 
| 
| 
| 
|
| 
| 
| 
| 
|
Moving on to inverting, the `invert(95%)hue-rotate(180deg)` 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 `saturate(0.5)url(#invert-blend)`).
```css
<filter id="invert-transform" color-interpolation-filters="linearRGB">
<feComponentTransfer>
<feFuncR type="gamma" exponent="0.15"></feFuncR>
<feFuncG type="gamma" exponent="0.15"></feFuncG>
<feFuncB type="gamma" exponent="0.15"></feFuncB>
<feFuncA type="gamma"></feFuncA>
</feComponentTransfer>
<feColorMatrix type="matrix" values="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"></feColorMatrix>
</filter>
<filter id="invert-blend">
<feComponentTransfer>
<feFuncR type="gamma" exponent="0.2"></feFuncR>
<feFuncG type="gamma" exponent="0.2"></feFuncG>
<feFuncB type="gamma" exponent="0.2"></feFuncB>
<feFuncA type="gamma"></feFuncA>
</feComponentTransfer><feColorMatrix values="-1 0 0 0 1 0 -1 0 0 1 0 0
-1 0 1 0 0 0 1 0"></feColorMatrix>
<feBlend mode="color" in="SourceGraphic"></feBlend>
</filter>
```
--
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/issues/5328#issuecomment-2481193144
You are receiving this because you are subscribed to this thread.
Message ID:
<openstreetmap/openstreetmap-website/issues/5328/2481193...@github.com>_______________________________________________
rails-dev mailing list
rails-dev@openstreetmap.org
https://lists.openstreetmap.org/listinfo/rails-dev
