p.enthalabs

slughorn — GPU Vector Graphics

slughorn

- Docs

- Examples

- GitHub ↗

!Image 1: slughorn

GPU Vector Graphics, _Reimagined._

A modern C++20 library implementing the Slug GPU vector-graphics technique. Ingest SVG, FreeType, Blend2D, Cairo, Skia — **_or author shapes directly with the slughorn native Canvas API_** — then upload to OpenGL, Vulkan, WebGPU, DirectX, and more.

Documentation & Links

Everything You Need

``` import slughorn

Create an atlas — the GPU texture backing store

atlas = slughorn.Atlas(2048) canvas = slughorn.canvas.Canvas(atlas)

Build a layered composite shape

canvas.begin_composite()

Dark background fill

canvas.rect(0.0, 0.0, 1.0, 1.0) canvas.fill(slughorn.Color(0.12, 0.12, 0.14, 1.0), 1.0)

Gold gradient rounded panel

canvas.rounded_rect(0.06, 0.06, 0.94, 0.94, 0.09)

gradient = canvas.create_linear_gradient(0.0, 0.0, 1.0, 1.0, [ slughorn.GradientStop(0.0, slughorn.Color(0.55, 0.31, 0.02, 1.0)), slughorn.GradientStop(1.0, slughorn.Color(1.00, 0.85, 0.35, 1.0)), ])

canvas.fill_gradient(gradient, 1.0)

Circle punched through (opposite winding)

canvas.arc(0.5, 0.5, 0.28, 0.0, 2.0 * math.pi, True) canvas.fill()

canvas.finalize()

Build → textures ready for GPU upload

atlas.build()

curve_tex = atlas.curve_texture # RGBA32F band_tex = atlas.band_texture # RGBA16UI ```

``` #include <slughorn/canvas.hpp>

// Atlas is the GPU texture backing store slughorn::Atlas atlas(2048); slughorn::canvas::Canvas canvas(atlas);

// Two-stop gold gradient auto gradient = canvas.createLinearGradient( 0_cv, 0_cv, 1_cv, 1_cv, { slughorn::GradientStop{0_cv, {0.55_cv, 0.31_cv, 0.02_cv, 1_cv}}, slughorn::GradientStop{1_cv, {1_cv, 0.85_cv, 0.35_cv, 1_cv}} } );

// Build a layered composite shape canvas.beginComposite();

// Dark background fill canvas.rect(0_cv, 0_cv, 1_cv, 1_cv); canvas.fill({0.12_cv, 0.12_cv, 0.14_cv, 1_cv}, 1_cv);

// Gold gradient rounded panel canvas.roundedRect(0.06_cv, 0.06_cv, 0.94_cv, 0.94_cv, 0.09_cv); canvas.fillGradient(gradient, 1_cv);

// Circle punched through (opposite winding) canvas.arc(0.5_cv, 0.5_cv, 0.28_cv, 0_cv, 2_cv * slughorn::PI_CV, true) canvas.fill();

canvas.finalize();

// Build → textures ready for GPU upload atlas.build();

const auto& curveTex = atlas.getCurveTextureData(); // RGBA32F const auto& bandTex = atlas.getBandTextureData(); // RGBA16UI ```

The Canvas API mirrors the familiar browser `<canvas>` element. Composite shapes stack fills, strokes, and gradients into a single GPU-uploadable atlas with zero runtime tessellation overhead — the heavy lifting happens once at build time, leaving the GPU pipeline clean and fast.