Tatsu's rank card skeleton recreated using canvas-constructor.

tatsu.js

import { Canvas } from 'canvas-constructor/skia';

// ? Tatsumaki Rank Card Skeleton (760x260)
new Canvas(760, 260)
    // * Background
    .setColor('#D3D3D3')
    .printRoundedRectangle(0, 0, 760, 260, 30)
    // * Avatar Panel
    .setColor('#FFFFFF')
    .printRectangle(28, 0, 165, 260)
    .setColor('#D3D3D3')
    .printRoundedRectangle(45, 20, 131, 131, 20)
    // * Reputation
    .printRoundedRectangle(45, 168, 131, 41, 11)
    // * User Flag
    .setColor('#FFFFFF')
    .printRoundedRectangle(208.5, 38, 50, 32, 11)
    // * Server Icon
    .printCircle(234, 126, 17)
    // * Progress Bar
    .printRoundedRectangle(278, 110, 463, 33, 11)
    // * Badge Panel
    .printRoundedRectangle(278, 191, 463, 51, 11)
    .setColor('#D3D3D3')
    .process((ctx) => {
        let distance = 319;
        for (let i = 0; i < 8; i++) {
            ctx.printCircle(distance, 216.5, 6);

            distance += 54;
        }
    })
    .png()

// Output: https://i.imgur.com/sVZXhbD.png