• color: string
• customLineEnd: (arg:{referenceSize: number, i: number, stats: Patron["stats"]}) => number;
• density: "VERY_LOW" | "LOW" | "MEDIUM" | "HIGH" | "VERY_HIGH"
• direction: "TOP" | "BOTTOM" | "RIGHT" | "LEFT"
• gap: number
• isReusingLastPattern: boolean
• patternType: "butt" | "round" | "square"
• size: ${number}% | ${number}px | "M" | "XS" | "S" | "L" | "XL" | "XXL"

• stats: {
  • zeroProb: number;
  • oneProb: number;
  • numberOfDots: number;
  • numberOfLines: number;
  • directionReference: "offsetHeight" | "offsetWidth";
  • sizeReference: "offsetHeight" | "offsetWidth";
  • dotSize: number;
  • strokeColor: string;
  • lineGap: number; }

Patron just need a configuration and a container.

const container = document.getElementById("foo");
const p = new Patron();
p.createPatron(container);

I have tested a few functions to animate customLineEnds

Choose one

//example 1
(arg) => 0.10 * arg.referenceSize * Math.sin((arg.i + theIntervar)/ 6) + (arg.referenceSize / (9.5))

//example 2
({referenceSize, stats, i}) =>  referenceSize * (1 - (i / stats.numberOfLines))

let theFunction: () => 1 // <-- paste here example 1 or 2

const container = document.getElementById("foo");
const p = new Patron({
    density: "HIGH",
    direction: "BOTTOM",
    patternType: "butt",
    size: "XS",
    color: "#f0a0a0",    
    customLineEnd: theFunction, // <--- HERE IT GOES
});

setInterval(  () => {
    theIntervar++;
    p.createPatron(container);
}, 150);