Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Draw SVG in PIXI.js Canvas

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



Share this post

Link to post
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

Share this post

Link to post
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 4
  • Thanks 1

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.