Generative Lines

This is a little experiment packed into a reusable library and web component.

Links

• Playground — Detailed documentation for the library and web component.
• Demo — Scroll-through demos showcasing different configurations and styles.
• Documentation — Detailed documentation for the library and web component.

I wrote this to explore:

• canvas 2d context drawing
• generative art
• web components
• atomic design in Astro

Quickstart

NPM Registry

npm install --save generative-lines

import { LinesCanvas } from 'generative-lines'

customElements.define('lines-canvas', LinesCanvas)

<lines-canvas
  lines="10"
  colors="5"
/>

Usage of ML Agent tools

I use the IntelliJ full-line completion model.

I also use locally ran llama-cpp with models such as:

• QuantFactory/EuroLLM
• unsloth/Qwen3.5

They assist with documentation, tedious refactoring, etc.

I know every line of code I publish.