search

DenverCoder1 / github-readme-streak-stats

🔥 Stay motivated and show off your contribution streak! 🌟 Display your total contributions, current streak, and longest streak on your GitHub profile README
https://streak-stats.demolab.com
MIT License
4.83k stars 750 forks source link

Ellipse behind fire shows up extra opaque when `background` is transparent #151

Closed DenverCoder1 closed 2 years ago

DenverCoder1 commented 3 years ago

Describe the bug Ellipse behind fire shows up extra opaque when background is transparent

To Reproduce Steps to reproduce the behavior:

  1. Go to https://github-readme-streak-stats.herokuapp.com/demo/?user=DenverCoder1&background=%23DD2727B3
  2. See color of the ellipse behind the fire icon

Or:

  1. Set the parameterbackground=DD2727B3 or to a similar transparent color
  2. See that the background behind fire doesn't match up

Expected behavior The ellipse is meant to mask out part of the ring so the background color appears behind the fire

Screenshots image

image

Desktop (please complete the following information): OS: Arch Linux Browser Brave Version 1.30.86 Chromium: 94.0.4606.61 (Official Build) (64-bit)

komen205 commented 3 years ago

Do you have any idea how to fix this? So #DD2727FF is totally not transparent and #DD272700 is the most transparent. Maybe we can compare the last two numbers and after a certain point, we set the backgruond fire color ourselves?

Any other ideas?

DenverCoder1 commented 3 years ago

I feel like SVG should have a way to "mask out" part of a shape instead of covering it up. That would be the best solution if we can get that to work.