Jump to content


drawSVG and Pixi

Moderator Tag

Recommended Posts

I didn't quite follow your question. Are you asking more of a PIXI question, like how is it best to copy an SVG into a PIXI/canvas graphic? I'm not a PIXI expert, sorry. In terms of GSAP, you could definitely make it more efficient by using an onUpdate for the updateBoule() call rather than calling it literally on every single tick. 

Link to comment
Share on other sites



I'm not an expert on PIXI, but maybe the issue is that each texture takes a few ms on being loaded and processed. GSAP is drawing that super fast and every tick is being triggered on time as far as I can see. One option would be to create all the textures upfront and store them in an array and then draw on PIXI.


Another option here would be to export each frame and create a sprite sheet and leverage PIXI's capacities in that aspect as @OSUblake did in this example:

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


Yet another option I see is to draw directly on PIXI using a couple of circles and move one of them as you draw the graphic, performance in that particular case would be far better.


I did some drawing in PIXI a few years back. This example should be under a NDA but that was almost 6 years ago so I think is safe to share it as I believe that code is not being used anymore. Is a lot of code but is well commented so you should find the relevant bits of it:

See the Pen d2ac612530e18ee0c1921263c15cdbc7 by rhernando (@rhernando) on CodePen


Hopefully this helps.


Happy Tweening!

  • Like 2
Link to comment
Share on other sites

May be I need to make an await function to deal with my slow svg to texture :)

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.