andrewgioia / keyrune

Magic: the Gathering set symbol pictographic font
Other
452 stars 44 forks source link

Archie (J20) is outlined incorrectly when rarity gradient is enabled #155

Closed scarletcs closed 2 days ago

scarletcs commented 3 years ago

Archie on the J20 gift cards looks like this:

2021-02-13_16-49-35_firefox

He's replicated fine with rarity gradient off. The hollow strokes here match the black strokes seen in his symol on the card.

2021-02-13_16-49-20_firefox

But when rarity gradient is on, the solid shapes get outlines that don't correspond to anything we see on the card, and which doesn't look great due to weird gaps appearing.

2021-02-13_16-49-22

At a small size (left; original featured on cards on the right) it's close but still not quite there, since the gaps make the outlines appear faded, and Archie has hollow eyes/beak instead of them being filled in.

2021-02-13_16-54-22_firefox 2021-02-13_16-53-50_firefox

(Actual Archie images from Arena Rector)

andrewgioia commented 3 years ago

I didn't realize this was related to the CSS outlining "hack", the true fix is to make this a multi-layered SVG which will push it to 4.0. The outline for now is just a convenience class and due to the nature of how it's done via CSS I unfortunately can't fix this one until we use 2 layered SVGs.