Draw SVG rope using JavaScript

#1

Post by stanko » Sat, Dec 31, 2022, 3:43 PM UTC

Draw SVG rope using JavaScript
muffinman.io

Re: Draw SVG rope using JavaScript

#2

Post by Waterluvian » Sat, Dec 31, 2022, 4:18 PM UTC

Everything about this is stunning and incredible. It’s one of those webpages that is art itself. Such a beautiful presentation. It’s also amazing to see someone walking through this kind of problem. It escapes me entirely but you make it look so obvious in the end!

Re: Draw SVG rope using JavaScript

#3

Post by Cerium » Sat, Dec 31, 2022, 4:43 PM UTC

Absolutely beautiful, excellent work.

I would like to comment that for the animation it has the rope anchored on the left. I think that a up and down loop animation would be most natural to have the center of the rope anchored since that motion is generated with two hands going in and out, the center should not look like it slides back and forth as the visible length changes.

Re: Draw SVG rope using JavaScript

#4

Post by peer2pay » Sat, Dec 31, 2022, 4:44 PM UTC

Yeah the SVG and animation are cool but the blog post is phenomenal! Great stuff!

Re: Draw SVG rope using JavaScript

#5

Post by bigyikes » Sat, Dec 31, 2022, 4:46 PM UTC

Computer graphics is such a fun area to work in. This rope is a perfect example of how having strong high school level math skills and a good idea can turn you into a kind of wizard. It’s a really special feeling when you bring to life a dynamic illustration that you can customize programmatically. If you let it go to your head, if kind of makes you feel like a god.

Re: Draw SVG rope using JavaScript

#6

Post by chromatin » Sat, Dec 31, 2022, 4:54 PM UTC

peer2pay wrote: post #4

Yeah the SVG and animation are cool but the blog post is phenomenal! Great stuff!

Agree; I was stunned by the interactivity and progressive build of the blog post itself.

Re: Draw SVG rope using JavaScript

#7

Post by [deleted] » Sat, Dec 31, 2022, 5:07 PM UTC

[deleted]

Re: Draw SVG rope using JavaScript

#8

Post by cod1r » Sat, Dec 31, 2022, 5:18 PM UTC

This is too cool

Re: Draw SVG rope using JavaScript

#9

Post by chagaif » Sat, Dec 31, 2022, 5:19 PM UTC

Does this work well on iOS?, I experienced some issues with foreignObject, and I failed to import an SVG in a react project, does anyone have an idea what I can do about that?

https://chagai.website/chagai-website-react/

Or the code here:

https://github.com/chagai95/chagai-website-react

Re: Draw SVG rope using JavaScript

#10

Post by [deleted] » Sat, Dec 31, 2022, 5:22 PM UTC

chagaif wrote: post #9

Does this work well on iOS?, I experienced some issues with foreignObject, and I failed to import an SVG in a react project, does anyone have an idea what I can do about that? https://chagai.website/chagai-website-react/ Or the code here: https://github.com/chagai95/chagai-website-react

[deleted]