Jump to content
Search Community

Draw SVG in PIXI.js Canvas

Migasubi test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



Does anyone know of a working example or a pen using the GSAP SVGdraw plugin inside of Pixi.js canvas setup ? 


The goal is to draw ( animate ) svg paths of an svg redrawn inside of Canvas. ( svg inside the canvas is setup as Pixi graphics object. )



Link to comment
Share on other sites

DrawSVGPlugin is only intended for SVG, not for PixiJS/canvas. However there's probably a way to creatively merge the two with enough effort. Unfortunately it's not something I have time to craft for you at the moment. Perhaps @OSUblake will swing by and lend some wisdom. He's usually a wiz at this stuff since he's great with PixiJS and SVG.  

  • Like 1
Link to comment
Share on other sites

Drawing graphics with Pixi is limited because of the way WebGL works. If you want SVG quality graphics, you'll need to use a 2D canvas as a texture, using the PIXI.Texture.fromCanvas method, and then call update every time you change that canvas.


That's how I do the morphing in this example.


See the Pen oWzVvb by osublake (@osublake) on CodePen


To draw strokes using canvas, here's a couple posts.



  • Like 5
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...