Would be nice to have an option for a transparent cat.
lipis opened this issue · 14 comments
Because the background is a gradient it will not look that nice with a single color :)
Absolutely agree @lipis!
I think it's not so easy to have the cat transparent keeping the awesome (and the special trait) animation of the tail.
Here is a SMIL solution. SMIL allow us to do things like this, without external js libs. Unfortunately or fortunately SMIL will be deprecated in Chrome.
Since in these days it stills working properly, it's possible to include something like this in the repo anyway, if @tholman agrees and consider an interesting idea.
If you add: mix-blend-mode: darken; to the svg, you'll get the effect you're looking for. Sadly, this won't be all browsers... but is a cleaner implementation than the SMIL, and will actually get browser support over time.
That'd be the way to go, if progressive enhancement is cool with you :)
you are absolutely right @tholman
progressive enhancement always!
Sad thing is, its not a blanket solution that will work with all colors (black and white/white and black though, are perfect)
The final color won't be the same fill/color since we are 'blending' with the background, but it's possible to play also with other mix-blend-mode's values and obtain cool results though.
Ultimately, going to leave this ticket open, but not implement anything yet. Who knows what the future will bring!
The blend mode is a good reference though, for anyone wanting to do this!
👍
+1
The final color won't be the same fill/color since we are 'blending' with the background, but it's possible to play also with other mix-blend-mode's values and obtain cool results though.
mix-blend-mode: multiply; might be what you're looking for:
And then mix-blend-mode: screen; for the white corner / black cat:
mix-blend-mode: darken; is so cool!! 👍
I forked this and modified it, using SVG masking to achieve transparency.
You can view the code here, a hosted example here, and its usage in my pomodoro timer.
I haven't checked if this still supports the tail animation; I prefer an opacity change in the fill color. Additionally, I changed the location of the <a> tags so the animation would only trigger when hovering over the triangular path rather than over any part of the SVG.
@tholman let me know if any of this is worth integrating/opening a PR for 😃
@lukasschwab I found this thread after I had implemented my own variant with masking. Mine animates a tentacle on hover, like in the original version.
@lukasschwab Unfortunately, your corner doesn't even show up using Firefox 63, it's fully transparent. The @cimi's solution is correctly displayed but not animated on hover. Both work fine with Chrome, though.