Draw SVG in PIXI.js Canvas

[Migasubi 0 Likes (Newbie)]

Hi, 

 

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. )

 

Thanks. 

[GreenSock 12,791 Likes (Superhero)]

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.  

[OSUblake 13,942 Likes (Superhero)]

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.