hiccup svg recipes

@thi.ng/hiccup-svg recipes

Multi-colored polyline

import * as svg from "@thi.ng/hiccup-svg";
import * as tx from "@thi.ng/transducers";

function coloredPolyline(points: number[][], tint: (t: number)=> string) {
    const n = 1 / (points.length - 1);
    return tx.iterator(
        tx.comp(
            tx.partition(2, 1),
            tx.mapIndexed((i, [a, b]: number[][]) => line(a, b, { stroke: tint(i*n) }))
        ),
        points
    );
}

Usage example

function spiral(r1: number, r2: number, twist: number) {
    return (t: number) => {
        const r = r1 + (r2 - r1) * t;
        t *= twist;
        return [
            100 + Math.cos(t) * r,
            100 + Math.sin(t) * r,
        ];
    };
}

fs.writeFileSync("colored-spiral.svg",
    serialize(
        svg({ width: 200, height: 200 },
            ...coloredPolyline(
                [...tx.iterator(
                    tx.map(spiral(20, 90, Math.PI * 10)),
                    tx.normRange(500))],
                (t) => `rgba(${~~(t * 255)}, 0, ${~~(255 - t * 255)}, 1)`
            )
        )
    )
);