@@ -26,6 +26,10 @@
   glyph, and text fonts use their ligatures (fi, ffi, ...) and contextual alternates. Emoji sequences come from one
   font, the first that has all of their characters, and the emoji variation selector picks a color glyph (❤️ in an
   emoji font rather than the text font's ❤).
+- `Image.renderText` renders COLR version 1 color glyphs (e.g. Noto-COLRv1): solid colors, linear, radial and sweep
+  gradients (pad, repeat, reflect), glyph outlines as masks, transforms and all composite modes; variable paints with
+  their default values. They are rendered at twice the size and scaled down, so layers sharing an edge don't let the
+  ones below show through. Fonts with both prefer them over their other color glyphs, like browsers.
 - Fallback fonts are only loaded when the text needs them, and glyphs (also decoded and scaled emoji bitmaps) are
   kept per font and size across calls.
 
 
@@ -22,6 +22,19 @@ export interface BitmapGlyph {
     top: number;
 }
 
+/**
+ * The colors of the font's first CPAL palette as RGBA (0xrrggbbaa), null for the text color (index 0xffff) and
+ * indices outside the palette
+ */
+export function parsePalette(font: Font, cpal: number): (index: number) => number | null {
+    const entries = font.u16(cpal + 2), records = cpal + font.u32(cpal + 8), first = font.u16(cpal + 12);
+    return index => {
+        if (index === 0xffff || index >= entries) return null;
+        const o = records + (first + index) * 4; // blue, green, red, alpha
+        return (font.u8(o + 2) << 24 | font.u8(o + 1) << 16 | font.u8(o) << 8 | font.u8(o + 3)) >>> 0;
+    };
+}
+
 /**
  * The layers of the font's color glyphs (COLR version 0 records, with the colors of the first CPAL palette), null if the
  * font has none. The lookup returns null for glyphs without layers
@@ -32,14 +45,7 @@ export function parseColorLayers(font: Font): ((glyph: number) => ColorLayer[] |
 
     const baseCount = font.u16(colr + 2), bases = colr + font.u32(colr + 4), layers = colr + font.u32(colr + 8);
     if (!baseCount) return null;
-
-    // the first palette
-    const entries = font.u16(cpal + 2), records = cpal + font.u32(cpal + 8), first = font.u16(cpal + 12);
-    const color = (index: number): number | null => {
-        if (index === 0xffff || index >= entries) return null;
-        const o = records + (first + index) * 4; // blue, green, red, alpha
-        return (font.u8(o + 2) << 24 | font.u8(o + 1) << 16 | font.u8(o) << 8 | font.u8(o + 3)) >>> 0;
-    };
+    const color = parsePalette(font, cpal);
 
     const cache = new Map<number, ColorLayer[] | null>();
     return glyph => {
 
@@ -7,6 +7,7 @@ import { Font, PathCommand } from './font.ts';
 import { Hinter } from './hinting.ts';
 import { ColorLayer, BitmapGlyph, parseColorLayers, parseBitmaps } from './color.ts';
 import { GlyphBuffer, parseGSUB } from './gsub.ts';
+import { PaintGlyphs, parsePaintGlyphs, paintExtent, renderPaintGlyph } from './colr.ts';
 import { decode as decodePNG } from '../codecs/png.ts';
 import { resample, TRIANGLE } from '../util/resample.ts';
 
@@ -46,6 +47,7 @@ interface SizedFont {
     hinter: Hinter | null;
     layers: ((glyph: number) => ColorLayer[] | null) | null;
     bitmaps: ((glyph: number) => BitmapGlyph | null) | null;
+    paints: PaintGlyphs | null;
     gsub: ((buffer: GlyphBuffer) => void) | null;
     glyphs: Map<number, Glyph>;
 }
@@ -62,8 +64,8 @@ interface Glyph {
     ink: { left: number, right: number } | null;
     /** bitmaps per subpixel offset */
     bitmaps: Array<GlyphBitmap | null>;
-    /** the layers or the bitmap of color glyphs */
-    color: { layers: ColorLayer[] } | { bitmap: BitmapGlyph } | null;
+    /** the paint graph (COLR version 1), the layers (version 0) or the bitmap of color glyphs */
+    color: { paint: true } | { layers: ColorLayer[] } | { bitmap: BitmapGlyph } | null;
     /** color bitmaps by subpixel offset and text color (bitmap glyphs only have the one for offset 0) */
     colors: Map<string, ColorBitmap | null>;
 }
@@ -86,7 +88,7 @@ const SUBPIXELS = 4;
 // parsed fonts are cached per memory region, so new views of the same font data (e.g. from node Buffers) hit the cache
 const fonts = new WeakMap<ArrayBufferLike, Map<string, Font>>();
 const hinters = new WeakMap<Font, Hinter>();
-const substitutions = new WeakMap<Font, { gsub: ((buffer: GlyphBuffer) => void) | null, layers: ((glyph: number) => ColorLayer[] | null) | null }>();
+const substitutions = new WeakMap<Font, { gsub: ((buffer: GlyphBuffer) => void) | null, layers: ((glyph: number) => ColorLayer[] | null) | null, paints: PaintGlyphs | null }>();
 // sizes (and hinting) per font, a few of them
 const sizes = new WeakMap<Font, Map<string, SizedFont>>();
 const SIZES = 16;
@@ -116,10 +118,10 @@ function sizedFont(data: Uint8Array, size: number, hinting: boolean): SizedFont
         if (!hinter.hasInstructions) hinter = null;
     }
     let shared = substitutions.get(font);
-    if (!shared) substitutions.set(font, shared = { gsub: parseGSUB(font), layers: parseColorLayers(font) });
+    if (!shared) substitutions.set(font, shared = { gsub: parseGSUB(font), layers: parseColorLayers(font), paints: parsePaintGlyphs(font) });
 
     if (bySize.size >= SIZES) bySize.clear();
-    bySize.set(key, sized = { font, scale: size / font.unitsPerEm, hinter, layers: shared.layers, bitmaps: parseBitmaps(font, size), gsub: shared.gsub, glyphs: new Map() });
+    bySize.set(key, sized = { font, scale: size / font.unitsPerEm, hinter, layers: shared.layers, bitmaps: parseBitmaps(font, size), paints: shared.paints, gsub: shared.gsub, glyphs: new Map() });
     return sized;
 }
 
@@ -129,10 +131,16 @@ function glyphOf(f: SizedFont, index: number, size: number): Glyph {
     if (g) return g;
 
     const { font, scale, hinter } = f;
-    const bitmap = f.bitmaps?.(index) ?? null, layers = bitmap ? null : f.layers?.(index) ?? null;
+    // renderers that support COLR version 1 prefer it over the other color glyphs
+    const paint = f.paints !== null && f.paints.paint(index) !== null;
+    const bitmap = paint ? null : f.bitmaps?.(index) ?? null, layers = paint || bitmap ? null : f.layers?.(index) ?? null;
     const advance = font.advance(index) * scale;
     g = { index, font: f, path: [], scale, advance: hinter ? Math.round(advance) : advance, ink: null, bitmaps: [], color: null, colors: new Map() };
-    if (bitmap) {
+    if (paint) {
+        g.color = { paint: true };
+        const extent = paintExtent(font, f.paints as PaintGlyphs, index, glyph => font.outline(glyph));
+        g.ink = extent && { left: extent.left * scale, right: extent.right * scale };
+    } else if (bitmap) {
         const s = size / bitmap.ppem;
         g.color = { bitmap };
         g.ink = { left: bitmap.left * s, right: (bitmap.left + bitmap.width) * s };
@@ -222,7 +230,8 @@ export async function render(fonts: Uint8Array[], size: number, text: string, la
                 let bitmap = g.colors.get(key);
                 if (bitmap === undefined) g.colors.set(key, bitmap = 'bitmap' in g.color
                     ? await scaledBitmap(g.color.bitmap, size / g.color.bitmap.ppem)
-                    : layeredGlyph(g, g.color.layers, subpixel / SUBPIXELS, foreground));
+                    : 'layers' in g.color ? layeredGlyph(g, g.color.layers, subpixel / SUBPIXELS, foreground)
+                        : paintedGlyph(g, subpixel / SUBPIXELS, foreground));
                 if (bitmap) blitColor(color ??= new Uint8ClampedArray(width * height * 4), width, height, bitmap, pixel + bitmap.left, baseline - bitmap.top);
                 continue;
             }
@@ -246,7 +255,7 @@ function shape(paragraph: string, count: number, font: (i: number) => SizedFont,
     const has = (f: SizedFont, codepoint: number): boolean => f.font.glyphIndex(codepoint) !== 0;
     const isColor = (f: SizedFont, codepoint: number): boolean => {
         const index = f.font.glyphIndex(codepoint);
-        return !!(f.bitmaps?.(index) || f.layers?.(index));
+        return !!(f.paints && f.paints.paint(index) !== null || f.bitmaps?.(index) || f.layers?.(index));
     };
 
     // the font of a grapheme (later fonts are only loaded when the earlier ones miss a character)
@@ -373,6 +382,12 @@ function layeredGlyph(g: Glyph, layers: ColorLayer[], offset: number, foreground
     return { data, width, height, left, top };
 }
 
+// a COLR version 1 glyph, its outlines rasterized like the others
+function paintedGlyph(g: Glyph, offset: number, foreground: number): ColorBitmap | null {
+    const { font } = g.font;
+    return renderPaintGlyph(font, g.font.paints as PaintGlyphs, g.index, g.scale, offset, foreground, glyph => font.outline(glyph), path => rasterizeGlyph(path, 1));
+}
+
 function premultiply(rgba: Uint8ClampedArray): void {
     for (let i = 0; i < rgba.length; i += 4) {
         const a = rgba[i + 3] / 255;
 
@@ -3,7 +3,8 @@
  https://www.1001fonts.com/carbon-font.html
  https://www.1001fonts.com/ethnocentric-font.html
  https://github.com/adobe-fonts/source-sans (SIL OFL, see OFL-SourceSans3.md)
- https://github.com/googlefonts/noto-emoji (subset, SIL OFL, see OFL-NotoColorEmoji.md)
+ https://github.com/googlefonts/noto-emoji (subsets of Noto Color Emoji and Noto-COLRv1, SIL OFL, see OFL-NotoColorEmoji.md)
+ colrv1 paints.ttf is built by colrv1-paints.py
  https://github.com/mozilla/twemoji-colr (subset, CC-BY 4.0, see CC-BY-Twemoji.md)
  */
 
@@ -155,9 +156,10 @@ const panic = message => {
     }
 
     {
-        // color glyphs from fallback fonts: CBDT bitmaps (Noto Color Emoji) and COLR layers (Twemoji), emoji sequences
+        // color glyphs from fallback fonts: CBDT bitmaps (Noto Color Emoji), COLR layers (Twemoji) and paints (Noto-COLRv1),
+        // emoji sequences
         const sans = await fs.readFile('./tests/fonts/sourcesans3 regular.otf');
-        for (const [file, target] of [['noto color emoji subset.ttf', 'emoji-cbdt'], ['twemoji mozilla subset.ttf', 'emoji-colr']]) {
+        for (const [file, target] of [['noto color emoji subset.ttf', 'emoji-cbdt'], ['twemoji mozilla subset.ttf', 'emoji-colr'], ['noto colrv1 subset.ttf', 'emoji-colrv1']]) {
             const emoji = await fs.readFile(`./tests/fonts/${file}`);
             const image = await Image.renderText([sans, emoji], 48, 'Hi 😀🔥 👍🏽 🇩🇪 1️⃣ ❤️ 👨‍👩‍👧', {color: 0x000000ff});
             const encoded = await image.encode(1, {creationTime: 0, software: ''});
@@ -195,4 +197,23 @@ const panic = message => {
         const bitmapOnly = await Image.renderText(await fs.readFile('./tests/fonts/noto color emoji subset.ttf'), 32, '🔥');
         if (bitmapOnly.width < 20) panic('bitmap font should render on its own');
     }
+
+    {
+        // every COLR version 1 paint feature: gradients, transforms, composite modes, the text color
+        const font = await fs.readFile('./tests/fonts/colrv1 paints.ttf');
+        const glyphs = Array.from({length: 17}, (_, k) => String.fromCodePoint(0xe000 + k)).join('');
+        const image = await Image.renderText(font, 48, glyphs, {color: 0x00aaaaff});
+        const encoded = await image.encode(1, {creationTime: 0, software: ''});
+        if (process.env.OVERWRITE_TEST)
+            await fs.writeFile('./tests/targets/colrv1-paints.png', encoded);
+        if (!await samePixels(await fs.readFile('./tests/targets/colrv1-paints.png'), encoded)) panic('colrv1-paints doesn\'t match');
+
+        // the linear gradient runs from red (left) to blue (right), the last glyph's square is in the text color
+        const linear = await Image.renderText(font, 100, '\ue000');
+        const [lr, , lb] = linear.getRGBAAt(Math.round(linear.width * 0.15), linear.height >> 1), [rr, , rb] = linear.getRGBAAt(Math.round(linear.width * 0.85), linear.height >> 1);
+        if (!(lr > 150 && lb < 100 && rb > 150 && rr < 100)) panic(`colrv1: linear gradient should go from red to blue (${lr},${lb} -> ${rr},${rb})`);
+        const foreground = await Image.renderText(font, 100, '\ue010', {color: 0x00aaaaff});
+        const [fr, fg, fb, fa] = foreground.getRGBAAt(Math.round(foreground.width * 0.12), foreground.height >> 1);
+        if (fr > 2 || Math.abs(fg - 0xaa) > 2 || Math.abs(fb - 0xaa) > 2 || fa < 253) panic(`colrv1: layers in the text color should take it (${fr},${fg},${fb},${fa})`);
+    }
 })();
@@ -0,0 +1,65 @@
+# builds "colrv1 paints.ttf" (python colrv1-paints.py "colrv1 paints.ttf", needs fontTools): a COLRv1 test font with one
+# glyph per paint feature, on U+E000 onwards
+import sys
+from fontTools.fontBuilder import FontBuilder
+from fontTools.pens.ttGlyphPen import TTGlyphPen
+from fontTools.colorLib.builder import buildCOLR, buildCPAL
+from fontTools.ttLib.tables.otTables import PaintFormat as F, ExtendMode, CompositeMode
+
+UPM = 1000
+def rect(x0, y0, x1, y1):
+    pen = TTGlyphPen(None)
+    pen.moveTo((x0, y0)); pen.lineTo((x0, y1)); pen.lineTo((x1, y1)); pen.lineTo((x1, y0)); pen.closePath()
+    return pen.glyph()
+def circle(cx, cy, r):
+    import math
+    pen = TTGlyphPen(None)
+    n = 16
+    pts = [(cx + r * math.cos(2 * math.pi * k / n), cy + r * math.sin(2 * math.pi * k / n)) for k in range(n)]
+    pen.moveTo(pts[0])
+    for k in range(1, n): pen.lineTo(pts[k])
+    pen.closePath()
+    return pen.glyph()
+
+names = ['.notdef', 'square', 'disc', 'bar']
+outlines = {'.notdef': rect(100, 0, 900, 800), 'square': rect(100, 0, 900, 800), 'disc': circle(500, 400, 350), 'bar': rect(450, 0, 550, 800)}
+features = ['linear', 'linear_p2', 'radial', 'sweep', 'repeat', 'reflect', 'rotate', 'skew', 'transform', 'scale_center', 'colrglyph', 'var_solid', 'multiply', 'src_in', 'xor', 'hue', 'foreground']
+for f in features: names.append(f); outlines[f] = rect(0, 0, 0, 0) if False else TTGlyphPen(None).glyph()
+
+palette = [(1, 0, 0, 1), (0, 0.6, 0, 1), (0, 0, 1, 1), (1, 0.8, 0, 1), (0.5, 0, 0.5, 0.6)]
+def line(stops, extend=ExtendMode.PAD):
+    return {'Extend': extend, 'ColorStop': [{'StopOffset': o, 'PaletteIndex': i, 'Alpha': 1.0} for o, i in stops]}
+rgb = [(0, 0), (0.5, 1), (1, 2)]
+glyph = lambda name, paint: {'Format': F.PaintGlyph, 'Glyph': name, 'Paint': paint}
+solid = lambda i, a=1.0: {'Format': F.PaintSolid, 'PaletteIndex': i, 'Alpha': a}
+paints = {
+    'linear': glyph('square', {'Format': F.PaintLinearGradient, 'ColorLine': line(rgb), 'x0': 100, 'y0': 0, 'x1': 900, 'y1': 0, 'x2': 100, 'y2': 800}),
+    'linear_p2': glyph('square', {'Format': F.PaintLinearGradient, 'ColorLine': line(rgb), 'x0': 100, 'y0': 0, 'x1': 900, 'y1': 0, 'x2': 900, 'y2': 800}),
+    'radial': glyph('square', {'Format': F.PaintRadialGradient, 'ColorLine': line(rgb), 'x0': 500, 'y0': 400, 'r0': 50, 'x1': 500, 'y1': 400, 'r1': 400}),
+    'sweep': glyph('disc', {'Format': F.PaintSweepGradient, 'ColorLine': line([(0, 0), (0.33, 1), (0.66, 2), (1, 0)]), 'centerX': 500, 'centerY': 400, 'startAngle': 0, 'endAngle': 360}),
+    'repeat': glyph('square', {'Format': F.PaintLinearGradient, 'ColorLine': line([(0, 0), (1, 3)], ExtendMode.REPEAT), 'x0': 400, 'y0': 0, 'x1': 600, 'y1': 0, 'x2': 400, 'y2': 800}),
+    'reflect': glyph('square', {'Format': F.PaintLinearGradient, 'ColorLine': line([(0, 0), (1, 3)], ExtendMode.REFLECT), 'x0': 400, 'y0': 0, 'x1': 600, 'y1': 0, 'x2': 400, 'y2': 800}),
+    'rotate': {'Format': F.PaintRotateAroundCenter, 'angle': 30, 'centerX': 500, 'centerY': 400, 'Paint': glyph('bar', solid(2))},
+    'skew': {'Format': F.PaintSkewAroundCenter, 'xSkewAngle': 20, 'ySkewAngle': 0, 'centerX': 500, 'centerY': 400, 'Paint': glyph('square', solid(1))},
+    'transform': {'Format': F.PaintTransform, 'Transform': {'xx': 0.5, 'yx': 0, 'xy': 0, 'yy': 0.5, 'dx': 250, 'dy': 200}, 'Paint': glyph('square', solid(0))},
+    'scale_center': {'Format': F.PaintScaleAroundCenter, 'scaleX': 0.5, 'scaleY': 1, 'centerX': 500, 'centerY': 400, 'Paint': glyph('disc', solid(3))},
+    'colrglyph': {'Format': F.PaintColrLayers, 'Layers': [glyph('square', solid(3)), {'Format': F.PaintColrGlyph, 'Glyph': 'rotate'}]},
+    'var_solid': glyph('disc', {'Format': F.PaintVarSolid, 'PaletteIndex': 0, 'Alpha': 0.5, 'VarIndexBase': 0xFFFFFFFF}),
+    'multiply': {'Format': F.PaintComposite, 'CompositeMode': CompositeMode.MULTIPLY, 'SourcePaint': glyph('disc', solid(3)), 'BackdropPaint': glyph('square', solid(2))},
+    'src_in': {'Format': F.PaintComposite, 'CompositeMode': CompositeMode.SRC_IN, 'SourcePaint': glyph('square', {'Format': F.PaintLinearGradient, 'ColorLine': line(rgb), 'x0': 100, 'y0': 0, 'x1': 900, 'y1': 0, 'x2': 100, 'y2': 800}), 'BackdropPaint': glyph('disc', solid(0))},
+    'xor': {'Format': F.PaintComposite, 'CompositeMode': CompositeMode.XOR, 'SourcePaint': glyph('disc', solid(0)), 'BackdropPaint': glyph('square', solid(2))},
+    'hue': {'Format': F.PaintComposite, 'CompositeMode': CompositeMode.HSL_HUE, 'SourcePaint': glyph('disc', solid(1)), 'BackdropPaint': glyph('square', solid(0))},
+    'foreground': {'Format': F.PaintColrLayers, 'Layers': [glyph('square', solid(0xFFFF)), glyph('disc', solid(4))]},
+}
+fb = FontBuilder(UPM, isTTF=True)
+fb.setupGlyphOrder(names)
+fb.setupCharacterMap({0xE000 + k: f for k, f in enumerate(features)})
+fb.setupGlyf(outlines)
+fb.setupHorizontalMetrics({n: (1000, 0) for n in names})
+fb.setupHorizontalHeader(ascent=900, descent=-100)
+fb.setupNameTable({'familyName': 'COLRv1 Test', 'styleName': 'Regular'})
+fb.setupOS2(); fb.setupPost()
+fb.font['COLR'] = buildCOLR(paints, glyphMap=fb.font.getReverseGlyphMap(), clipBoxes={f: (0, -100, 1000, 900) for f in features})
+fb.font['CPAL'] = buildCPAL([palette])
+fb.save(sys.argv[1])
+print('features', features)