Vue 3 component to easily create any style martial arts belt in SVG format.



npm install svg-belt

IMPORTANT: Chalk 5 is ESM. If you want to use Chalk with TypeScript or a build tool, you will probably want to use Chalk 4 for now. Read more.


<script setup lang="ts">
   import {SVGBelt, BeltProps, BeltSystem, ibjjfJSON} from 'svg-belt'

   const ibjjfSystem: BeltSystem = new BeltSystem(ibjjfJSON);

   const whiteBelt: BeltProps[] = ibjjfSystem.getBeltPropsByName("White", 0);

   <SVGBelt :beltProps="whiteBelt" />

Chalk comes with an easy to use composable API where you just chain and nest the styles you want.

import chalk from "chalk";

const log = console.log;

// Combine styled and normal strings
log("Hello") + " World" +"!"));

// Compose multiple styles using the chainable API
log("Hello world!"));

// Pass in multiple arguments
log("Hello", "World!", "Foo", "bar", "biz", "baz"));

// Nest styles
log("Hello", chalk.underline.bgBlue("world") + "!"));

// Nest styles of the same type even (color, underline, background)
    "I am a green line " +"with a blue substring") +
      " that becomes green again!"

// ES2015 template literal
CPU: ${"90%")}
RAM: ${"40%")}
DISK: ${chalk.yellow("70%")}

// Use RGB colors in terminal emulators that support it.
log(chalk.rgb(123, 45, 67).underline("Underlined reddish color"));
log(chalk.hex("#DEADED").bold("Bold gray!"));

Easily define your own themes:

import chalk from "chalk";

const error =;
const warning = chalk.hex("#FFA500"); // Orange color


Take advantage of console.log string substitution:

import chalk from "chalk";

const name = "Sindre";
console.log("Hello %s"), name);
//=> 'Hello Sindre'


View Github