Saturday, 29 September 2018

Quest Instructions - svg lines


I've been wondering how I can get these swirly lines to look good - I want them to grow out somehow (like above) but I'd prefer tapered lines, like in my static drafts. I talked to tim about it briefly and he suggested either a video that autoplays when you get to it (in the background) or a gif that just plays the once, though neither of those are able to play backwards (though that's not necessarily needed)

I decided to go with svg lines for now - I might use the gif for another similar part on the next page, though.

It looks alright! Though there's issues with using the same code for multiple lines - they don't all start/finish in the right place. I had a play around with it and found it's because the code measures the line length and then calculates from there, but when there's multiple lines they're not all the same length. I put it into three different functions to make it work slightly better, though there's still things I want to fix up.

I also added floaty particles in the background to add to the magical vibe.

No comments:

Post a Comment