How Much CSS or Javascript [or coding] went into Canva

Question

● I think the CSS, JavaScript, and/or coding on www.canva.com look cool. When you move your mouse [does not work on cellphones to my knowledge], it highlights the faded area in the background.
● I just wanted to know what type of coding and how much of it went into just making the background in and of itself without the sign in or sign up when you first go to the page.
● Also, do you think the code for the background can be done in the time span of one day?

Answer 1

(…took me 30 minutes for basic code and another 10 for the gradients because of @visph's help…… ^_^ )

Answer 2

I don't know how exactly they handle the effect, but you can have an idea of how much code you need to write for, you can have a look to this code of @ValentinHacker, which handle a such kind of effect: https://code.sololearn.com/WnbRPT0XHhRK/#html

And about the time to do it, @VH could say how he take time to fo it, but don't expect for a quick realisation, until you're very skilled, experimented :P

However, you can sometimes build great things, by just assembling various snippet from different origin: it's not always simplier, but can made earn time, and is very formative when you must understand how each thing work to success in making everything works together: progressively, you'll be able to write more and more pieces of code ;)

Answer 3

@visph, @ValentinHacker
● Oh ok, when looking at Valentin's code I really do get a general idea of how it works. I imagine that canva...
▪1) Clumped the pictures together.
▪2) Applied something similar to Valentin's as an overlay above the picture (only canva made it a blurry see-through).
▪3) Implemented a system of CSS and Javascript so that the colors would fade back in after a few seconds.
● It's a very broad idea but I'm glad even advanced coders can't just look at it, write the code, and say "here it is in a nice package."
● I mean it would be nice, but I would have a like more work ahead of me as a coder then. 😅