skills.rest
matthewharwood
matthewharwoodCOMMUNITY
Explore all skills by this author →
GitHub

pixijs-scene-graphics

Provide a unified Graphics API for vector drawing in PixiJS.

1|Updated Apr 26, 2026
Search Tags:#graphics#patterns#svg#pixijs#gradients#hit-testing#vector-drawing
One-click install
npx skills add https://github.com/matthewharwood/dean-stack --skill pixijs-scene-graphics-matthewharwood
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pixijs-scene-graphics
Source: https://github.com/matthewharwood/dean-stack/tree/main/.claude/skills/pixijs-scene-graphics
Command: npx skills add https://github.com/matthewharwood/dean-stack --skill pixijs-scene-graphics-matthewharwood

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a unified API for vector drawing with PixiJS Graphics, reducing boilerplate and enabling consistent shape creation, fills, strokes, and effects.

Core Features & Use Cases

  • Shape and path drawing with a simple, shape-first workflow.
  • Supports fills, strokes, gradients, textures, and patterns.
  • SVG import/export and hit-testing for interactive graphics.
  • GraphicsContext sharing, cloning, and serialization to SVG.

Quick Start

Create a Graphics object, draw a rounded rectangle, and fill it with a gradient.

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 and shapes with PixiJS?▼

To draw vector graphics with PixiJS, use the Graphics API to create shapes, paths, fills, and strokes, reducing boilerplate for complex scenes like UI overlays and game HUDs.

Can I import and export SVG files using PixiJS?▼

Yes, you can import and export SVG files using PixiJS. The Graphics API supports serialization to SVG, enabling scalable vector art workflows and direct integration of SVG path data.

Does PixiJS support gradients and textures for vector fills?▼

Yes, PixiJS supports gradients and textures for vector fills. The Graphics API provides options for applying fills, strokes, patterns, and textures to shapes and paths.

How do I implement hit testing for interactive graphics in PixiJS?▼

PixiJS implements hit testing through its Graphics API, allowing you to detect interactions on complex vector shapes, paths, and UI overlays accurately within your scene.

What is the best way to create cutouts and holes in PixiJS vector shapes?▼

The best way to create cutouts in PixiJS vector shapes is using the Graphics API's path operations and cut functionality, which allows you to easily render holes inside existing shapes.

Can I clone and share GraphicsContext across multiple PixiJS objects?▼

Yes, you can clone and share GraphicsContext across multiple PixiJS objects. This allows you to reuse complex vector drawing configurations and optimize rendering performance across scenes.

Related Skills

Explore More Software Engineering Skills→
fyunusafyunusa

pixijs-2d

Render 2D graphics with PixiJS using WebGL and WebGPU.

Community
Intermediate
pixijspixijs
302

pixijs-scene-graphics

Draw and render vector graphics with PixiJS v8 Graphics API.

Official
Advanced
freshtechbrofreshtechbro
682

pixijs-2d

Render 2D graphics with sprites, particles, and filters using WebGL/WebGPU.

Community
Intermediate
adamhjkadamhjk
2

pixijs-scene-graphics

Create vector shapes, paths, and gradients in PixiJS v8.

Community
Intermediate