There are few things in design as beautiful as animations that update intuitively as you scroll. Bravo! I will be using this for my own scrollytelling inspiration :)
Draw SVG rope using JavaScript
41–50 of 74 posts
Re: Draw SVG rope using JavaScript
#42I want to see gpt doing this
Re: Draw SVG rope using JavaScript
#43Author here. Woah! This kinda exploded, thank you so much for the kind words! Lately, I'm trying to add more interactivity to my posts. Mainly inspired by amazing work of Bartosz Ciechanowski [1]. I started drawing with code a few years ago and completely fell in love with it. Problems like this one scratch my itch for creative programming. I hope some of my posts will inspire people to try making pictures using code…
My first thought when I saw this is it would also be useful to draw millipedes and snakes
Re: Draw SVG rope using JavaScript
#44Earlier quoted context omitted.
Feels silly to say it here but I couldn't find a way to contact you: on your blog archive page I can expand categories but not collapse them.
Can you please tell me which browser/os are you using? I'll look into it, although it works my laptop/phone. P.S. Unfortunately I had some bad experiences with leaving contact info public.
Brave browser (basically Chrome) on Windows 10, and same behavior on Safari on iOS.
Re: Draw SVG rope using JavaScript
#45Author here. Woah! This kinda exploded, thank you so much for the kind words! Lately, I'm trying to add more interactivity to my posts. Mainly inspired by amazing work of Bartosz Ciechanowski [1]. I started drawing with code a few years ago and completely fell in love with it. Problems like this one scratch my itch for creative programming. I hope some of my posts will inspire people to try making pictures using code…
Please make the SVG on the side of the viewport rather than on the top, it makes it difficult to read, since our screens are generally wider than they are tall. A similar effect is used on https://pomb.us/build-your-own-react/ if you wanted to take a look.
Re: Draw SVG rope using JavaScript
#46Author here. Woah! This kinda exploded, thank you so much for the kind words! Lately, I'm trying to add more interactivity to my posts. Mainly inspired by amazing work of Bartosz Ciechanowski [1]. I started drawing with code a few years ago and completely fell in love with it. Problems like this one scratch my itch for creative programming. I hope some of my posts will inspire people to try making pictures using code…
It's interesting that you mentioned, Ciechanowski. It's definitely what I thought of when I saw your post.
After seeing the GPS post [1] on that website, I also decided that I wanted to write posts with more visualizations. I wonder how many people the author has inspired!
Re: Draw SVG rope using JavaScript
#47Author here. Woah! This kinda exploded, thank you so much for the kind words! Lately, I'm trying to add more interactivity to my posts. Mainly inspired by amazing work of Bartosz Ciechanowski [1]. I started drawing with code a few years ago and completely fell in love with it. Problems like this one scratch my itch for creative programming. I hope some of my posts will inspire people to try making pictures using code…
Extremely cool.
Something small seems a little off and I'm trying to quantify it. It's something to do with the rope in the tighter bends. Somehow I think the rope needs to be a little tighter — the twisted bits a little closer together as the bend tightens.
Maybe tightening the spacing between "knots" relative to the amount of curvature — rather than using a fixed spacing? Imagine some longitudinal compression occurs as the bend tightens.
Here's an example of an "analog" rope image that might be illustrative: https://cpartyrentals.com/wp-content/uploads/2015/06/rope-le...
Re: Draw SVG rope using JavaScript
#48This is great. I hope you get into Beziers next, I get the strong feeling they can be elegant if done programmatically but I haven't yet put my finger on how and still kinda eyeball them.
Re: Draw SVG rope using JavaScript
#49"Depending on your needs, you could stop right here," but he doesn't and continues to make it better. What a great write-up and site!
It's like when I watch sped up digital painting videos on YouTube, every time I think "this is perfect" the artist continues and redefines what "perfect" means.
Re: Draw SVG rope using JavaScript
#50> The image below will stay in the viewport and update as you scroll.
This blew my mind for some reason.