Jump to content
Search Community

It's not funny ...

mikel 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



Impressed by the style I started testing rough.js.
Unfortunately, (you) I can not animate these rough elements (?).
Alternatively I tried using the rough random rendering as an animation - the challenge was too hard for me ...


See the Pen vRrBWm by mikeK (@mikeK) on CodePen


Best regards



P.S: The original cartoon was a cover of SPIEGEL - see info.
Instead of an ingenuous girl, I used EGON as the protagonist.



Link to comment
Share on other sites

Hey Mikel,


I went through the docs of rough js, unfortunately it doesn't give you a rough path that you can use to morph. They have this generator object but the rough path is buried deep inside the object and split into an array. Not an easy way to access it and use it. It does have simple commands that you can use but that is going to be a lot of work to do. Maybe you need to find any other library that generates rough paths for you that you can use to animate.


First method that I found to do it using rough js is to draw new rough path on each frame, but animation looks too rough(no pun intended). You can adjust roughness for smoother animation.


See the Pen VXqwoK by Sahil89 (@Sahil89) on CodePen


Another way would be to use delayed callback to limit the paths you draw every second,


See the Pen PRXwYJ by Sahil89 (@Sahil89) on CodePen


Anyway, where have you been? How are you?


  • Like 6
Link to comment
Share on other sites

@shihn Thanks for the response, I think Mikel want to do some kind of squiggly animation using rough.js. Similar to intro in following video,



It can be done using MorphSVGPlugin by morphing path from one rough path to another. Is there a way to get raw rough path in your library? So it can be used to morph over short time span so it will appear as squiggly line animation?

  • Like 4
Link to comment
Share on other sites

Hi, @mikel, long time no see!


rough.js looks like a pretty cool library. Thanks for sharing!


And if you're looking for a hosted library, I would recommend checking out jsDelivr. You're not going to find a lot of libraries on cdnjs.




10 hours ago, PointC said:

Perhaps Master @OSUblake's SVG Squigglevision can help.


That started out as a joke to your handwriting tutorial. :lol:




Calculating a shaky/rough look is pretty hard on the CPU, so I created 5 different frames ahead of time, and then cycle through them. It's the same thing @Carl is doing in his video, but he's only using 2 frames.


The generator article that @shihn posted shows how you can reuse shapes. That might be a better approach than creating a new set of shapes on every draw call.


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




  • Like 5
Link to comment
Share on other sites

Hi @OSUblake,


thanks - your advice and code is perfect: The leech is alive ...


See the Pen aYPGBz by mikeK (@mikeK) on CodePen


@Sahil, @PointC: Thanks for support and comments.


@shihn: Your library is awesome. I like the look.
And if you could morph the whole thing - woww.
By the way: 'It's a shame!' refers to the big f


Best regards


  • Like 5
Link to comment
Share on other sites

1 hour ago, OSUblake said:


Wow! Don't know how I didn't see that, but congrats! 


Just guessing here but I would imagine you were downloading and compiling your latest upgrade from the Matrix and your visual sensors were operating with reduced power or momentarily turned off during that process.

  • Haha 5
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...