JSFiddle - React, Tailwind, and code Playground

by makingthings

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Debug Paper.js</title>
    <script src="https://unpkg.com/acorn"></script>
    <script src="https://unpkg.com/paper"></script>
    <script src="https://unpkg.com/opentype.js"></script>
    <style>
        html,
        body {
            margin   : 0;
            overflow : hidden;
            height   : 100%;
        }

        canvas[resize] {
            width  : 100%;
            height : 100%;
        }
    </style>
</head>
<body>
<canvas id="canvas" resize></canvas>
<script>

    const handleZero = (path) => {
        path.children = path.children.slice(0, 1);
    };

    const getConsecutiveZerosIndices = (content) => {
        const zero = '0';
        return [...content]
            .map((char, i) => ({ char, i }))
            .filter(({ char, i }) => {
                const previousCharacter = content?.[i - 1];
                const nextCharacter = content?.[i + 1];
                return char === zero && (previousCharacter === zero || nextCharacter === zero);
            })
            .map(({ i }) => i);
    };

    const drawText = (content, font) => {
        const fontPaths = font.getPaths(content, 0, 100, 100);
        const consecutiveZerosIndices = getConsecutiveZerosIndices(content);
        const paths = fontPaths.map((fontPath, i) => {
            const path = new paper.CompoundPath(fontPath.toSVG());
            if (consecutiveZerosIndices.includes(i)) {
                handleZero(path);
            }
            return path;
        });
        const group = new paper.Group(paths);
        group.fillColor = 'red';
        return group;
    };

    const draw = (font) => {
        const path1 = drawText('10k', font);
        const path2 = drawText('100k', font);
        const path3 = drawText('1000k', font);

        path2.position = path1.position.add(0, path1.bounds.height * 1.2);
        path3.position = path2.position.add(0, path2.bounds.height * 1.2);

       ...