pixijs-scene-graphics

Create vector graphics in PixiJS v8 using Graphics and GraphicsContext APIs.

Updated Mar 13, 2022

Search Tags:#graphics #pixijs #gradients #hit testing #vector rendering #svg import export #cut holes

Ready to run

npx skills add https://github.com/alexkafer/alexkafer-web --skill pixijs-scene-graphics-alexkafer

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: pixijs-scene-graphics
Source: https://github.com/alexkafer/alexkafer-web/tree/main/.agents/skills/pixijs-scene-graphics
Command: npx skills add https://github.com/alexkafer/alexkafer-web --skill pixijs-scene-graphics-alexkafer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of creating crisp, scalable vector graphics in PixiJS without relying on raster assets or manual triangulation, by providing a comprehensive, shape-first workflow for the Graphics leaf and its shared drawing context.

Core Features & Use Cases

Shape-then-style drawing: Build rectangles, circles, ellipses, rounded shapes, stars, and complex paths, then apply fill and/or stroke for consistent chaining-based authoring.
Advanced styling and composition: Use FillGradient (linear/radial), FillPattern, textured fills, and cut()-based holes for stencil-like negative space.
Scene integration utilities: Share a GraphicsContext for reused tessellation, import/export SVG for roundtripping, and perform containsPoint hit testing that respects holes.

Quick Start

Create a rectangle, then apply fill and stroke styling in sequence to add the resulting vector shape to the PixiJS stage.

Frequently Asked Questions about pixijs-scene-graphics

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I draw vector graphics in PixiJS v8 using a shape-then-style workflow?▼

To draw vector graphics in PixiJS v8, build primitives or paths first, then apply fill and stroke styling in sequence. This chaining-based authoring ensures consistent rendering using the Graphics and GraphicsContext APIs.

How do I cut holes in PixiJS Graphics shapes for negative space?▼

Cut holes in PixiJS Graphics shapes using the cut()-based method to create stencil-like negative space. This allows complex composition by subtracting inner shapes from outer vector paths during the drawing workflow.

Can I import and export SVG files using PixiJS Graphics?▼

Yes, PixiJS Graphics supports SVG import and export for roundtripping vector assets. This enables loading external SVG files into GraphicsContext and exporting scene vector shapes back to SVG format.

Does PixiJS containsPoint hit testing respect cut holes in vector shapes?▼

PixiJS containsPoint hit testing evaluates topology-aware bounds, meaning it respects cut holes within vector shapes. Hit detection accurately excludes negative space created by the cut() method during interaction checks.

How do I apply linear and radial gradients as fills in PixiJS v8?▼

Apply linear and radial gradients in PixiJS v8 using FillGradient. After defining a vector shape, chain the gradient fill via the Graphics API to render smooth color transitions across the path geometry.

What is the best way to share reused tessellation across multiple PixiJS Graphics objects?▼

Share a GraphicsContext across multiple PixiJS Graphics objects to reuse tessellation. Defining drawing commands on a single context allows multiple display objects to render identical vector geometry efficiently without duplication.