Derivative of DJR's Bungee (djr.com/bungee) made to demonstrate COLRv1 gradients.
This repository contains a simple hack on Bungee to add gradients for the purpose of demonstrating COLRv1.
python scripts/make_gradient_colrv1.py fonts/Bungee_Color_Fonts/BungeeColor-Regular_colr_Windows.ttf
Note the use of two gradients in opposing direction within a single glyph. To make your own variant, perhaps going between light and dark blue:
# For example
python3 -m venv venv
source venv/bin/activate
pip install fonttools
Edit scripts/make_gradient_colrv1.py
, for example:
# BEFORE, red to gold
cpal.palettes[0].append(color('#ffd700'))
cpal_red = 0
grad_c1 = cpal_red
grad_c2 = 2
cpal.numPaletteEntries = len(cpal.palettes[0])
# AFTER, blue to pinkish
cpal.palettes[0].append(color('#4000fa'))
cpal.palettes[0].append(color('#ff095'))
cpal_red = 0
grad_c1 = 2
grad_c2 = 3
cpal.numPaletteEntries = len(cpal.palettes[0])
Rebuild the font binary and test the result:
python scripts/make_gradient_colrv1.py fonts/Bungee_Color_Fonts/BungeeColor-Regular_colr_Windows.ttf
python -m http.server 8010
Open http://localhost:8010/test.html in a browser, it should look something like this:
If you try this out and want to share we'd love it if you'd send us a screenshot at https://twitter.com/googlefonts. If you get stuck please file an issue here.
TODO link when one exists :)
Bungee Spice is released under the SIL Open Font License. This license is available with a FAQ at http://scripts.sil.org/OFL