skills.rest
encounterplus
encounterplusOFFICIAL
Explore all skills by this author →
WebsiteGitHub

pixijs-scene-graphics

Construct and style vector shapes for PixiJS scene graphs.

16|8|Updated May 20, 2020
Search Tags:#graphics#svg#pixijs#gradients#hit testing#vector rendering#holes
One-click install
npx skills add https://github.com/encounterplus/web-client --skill pixijs-scene-graphics-encounterplus
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pixijs-scene-graphics
Source: https://github.com/encounterplus/web-client/tree/main/.agents/skills/pixijs-scene-graphics
Command: npx skills add https://github.com/encounterplus/web-client --skill pixijs-scene-graphics-encounterplus

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you build crisp, SVG-like vector graphics in PixiJS without falling into v7-era drawing patterns, so your shapes render correctly and remain efficient to reuse.

Core Features & Use Cases

  • Shape-then-style vector drawing: Create shapes and paths with Graphics by drawing geometry first, then applying fill() and stroke() for consistent chaining behavior.
  • Advanced fills, gradients, patterns, and holes: Use FillGradient (linear/radial), FillPattern, texture-based fills, and cut() holes (including multiple-hole workflows).
  • Reusable contexts and prebuilt paths: Share a GraphicsContext across Graphics instances to avoid duplicate tessellation, and reuse GraphicsPath to draw the same shape efficiently many times.
  • Rendering-quality utilities: Support draw-time transforms (rotateTransform, translateTransform, setTransform), cloning/clearing/bounds, topology-aware containsPoint hit testing, and SVG import/export (svg, graphicsContextToSvg).

Quick Start

Create a Graphics instance, draw a shape using methods like rect() or moveTo()/lineTo(), then apply fill() and optionally stroke().

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 and fill vector shapes in PixiJS?▼

To draw and fill vector shapes in PixiJS, create a Graphics instance, define geometry using methods like rect() or moveTo() and lineTo(), then apply fill() and optionally stroke() to style the shape.

How do I create holes in PixiJS Graphics shapes?▼

You can create holes in PixiJS Graphics shapes using the cut() method, which supports multiple-hole workflows to achieve stencil-like effects by subtracting geometry from the primary shape.

Does PixiJS support SVG import and export for vector graphics?▼

Yes, PixiJS supports SVG import and export for vector graphics via the svg and graphicsContextToSvg utilities, allowing you to convert between Graphics objects and SVG formats.

Can I apply gradients and patterns as fills in PixiJS?▼

Yes, you can apply gradients and patterns as fills in PixiJS using FillGradient for linear or radial gradients, FillPattern for patterned fills, and texture-based fills for complex styling.

What is the best way to reuse PixiJS vector graphics across multiple objects?▼

The best way to reuse PixiJS vector graphics across multiple objects is sharing a GraphicsContext across Graphics instances to avoid duplicate tessellation, and reusing GraphicsPath to draw identical shapes efficiently.

How does hit testing work for complex vector paths in PixiJS?▼

Hit testing for complex vector paths in PixiJS uses topology-aware containsPoint logic, accurately detecting interactions with overlapping shapes, holes, and intricate geometry within the scene graph.

Related Skills

Explore More Software Engineering Skills→
encounterplusencounterplus
16

pixijs-scene-dom-container

Synchronize HTML element overlays with PixiJS scene graph transforms via DOMPipe.

Official
Intermediate
pixijspixijs
302

pixijs-scene-graphics

Draw and render vector graphics with PixiJS v8 Graphics API.

Official
Advanced
adamhjkadamhjk
2

pixijs-scene-core-concepts

Explain PixiJS scene graph hierarchies, transforms, and display object types.

Community
Basic
freshtechbrofreshtechbro
682

pixijs-2d

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

Community
Intermediate