World image with CSS blipping

[Jamchiller]

As discussed, the SVG needs ot be put in, ideally with the CSS blipping coolness

[oliverjam]

So I've implemented this, and it kind of works, with a few issues:

• [ ] I'm currently having the nodes flash the yellow primary colour on and off. This isn't very visible on a white background.

• [ ] In order to animate the SVG with CSS the entire thing needs to be in the HTML document. Given that the SVG is 1359 lines of code on its own (the entire HTML doc without is 256...) this insanely bloats the file just so we can have an animation. If we weren't animating I could just use the SVG in an img tag like any other image, so it gets pulled in as an external resource, rather than being embedded in the HTML.

• [ ] There might be a way to animate the SVG within the file itself (so we can use it in an img tag), but it is deprecated in Chrome and Firefox (meaning you'll get a warning when you use, and they're planning to drop support in the future), and it won't work in any IE/Edge at all.

[oliverjam]

@Jazzalenko To clarify why using the SVG in an image tag is preferable:

VS

[lickcreative]

Okay so what we going to do about this? Is the bloating of the file that bad? Ie. it's a lot more code but still won't add that much file size right? I'm happy to keep it in if you are.

If we do keep it, it's super hard to see. Definitely yellow isn't helping, could we try red? Or is there a way to make the points that animate become larger? And also, could you slow down the animation? Since it seems they appear for about half a second and disappear - I think a slower blipping would be nice. Like 3-5 seconds, before fading out again.

Finally, if you think it would be better as a gif or some other filetype, I could try get that created. Let me know

[oliverjam]

It makes the HTML file over 5 times larger (from 175kb to almost 1mb). This will obviously slow down initial page load, but it also makes the initial parsing of the page much slower as the browser has to read through a thousand lines and parse them before actually showing the content. Loading in the same kilobytes of data in an image or video tag would still be better because the browser can defer that and keep loading the rest of the page (images often appear well after the rest of the page has loaded). This is also ignoring the JavaScript and CSS I had to write to get the animation to work.

Red does look better (do you want to pick a complementary shade of red for me to use?)

I think an .mp4 might be the best route. It's a crazy efficient file format so the overall size probably won't be bigger, and it'll load asynchronously and should work on all devices.

EDIT: Sorry I totally fucked up the numbers lol. Wondered why my base HTML file was so big. It's 175kb with the SVG, and only 12kb without. So it actually makes the file 14.5 times bigger (although the final size is way smaller thank god).

[lickcreative]

Okay I will look at getting an mp4!

[Jamchiller]

Briefed into Lick now.

[Jamchiller]

So spencer has made this but it's not exactly what I was looking for so I'll go back to him with amends...

[Jamchiller]

This is saved in the assets folder now!

[oliverjam]

Done