pixijs-scene-graphics

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

2|2|Updated May 1, 2026
One-click install
npx skills add https://github.com/adamhjk/mvtt --skill pixijs-scene-graphics-adamhjk
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: pixijs-scene-graphics
Source: https://github.com/adamhjk/mvtt/tree/main/.agents/skills/pixijs-scene-graphics
Command: npx skills add https://github.com/adamhjk/mvtt --skill pixijs-scene-graphics-adamhjk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pixi.js, pixi-graphics, pixi-svg-importer, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the creation of vector-based graphics in PixiJS, enabling users to draw complex shapes, paths, and gradients efficiently.

Core Features & Use Cases

  • Shape Drawing & Styling: Enables drawing rectangles, circles, polygons, and complex shapes with fills and strokes.
  • Advanced Path Operations: Supports creating paths with bezier, quadratic, arc, and more, facilitating detailed custom designs.
  • Design and Game Development: Ideal for crafting vector assets, UI components, or visual effects directly within PixiJS.

Quick Start

Use the pixijs-scene-graphics skill to draw a filled blue rectangle, a red circle, and a complex path with a 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 complex shapes and paths in PixiJS v8?

You can draw complex shapes and paths in PixiJS v8 by using a comprehensive vector graphics API that supports rectangles, circles, polygons, bezier curves, arcs, and custom strokes for graphic design and game assets.

Can I import and export SVG files directly in PixiJS?

Yes, you can import and export SVG files in PixiJS using built-in SVG importer functionality, allowing you to seamlessly integrate existing vector graphics into your game design or UI development workflow.

Does PixiJS support advanced path operations like bezier curves and arcs?

PixiJS supports advanced path operations including bezier curves, quadratic curves, and arcs, enabling you to create detailed custom vector designs and intricate visual effects directly within your rendering environment.

What's the best way to create dynamic vector graphics for game assets in PixiJS?

The best way to create dynamic vector graphics for game assets in PixiJS is by utilizing an API that offers shape creation, path manipulation, gradients, and patterns, streamlining the development of UI components and visual effects.

Do I need additional libraries to render vector graphics in PixiJS?

Yes, rendering vector graphics in PixiJS requires the core pixi.js library along with dependencies like pixi-graphics and pixi-svg-importer to fully support shape drawing, styling, and SVG file operations.

Are gradients and patterns supported for shape styling in PixiJS?

Gradients and patterns are fully supported for shape styling in PixiJS, allowing you to apply complex fills and strokes to drawn shapes, polygons, and paths for rich visual game asset design.