DEV Community

Discussion on: Amazon Alexa Echo Dot in CSS, HTML and JS

Collapse
 
trueneu profile image
Pavel Gurkov

At first I thought, 'whoa! Such a lively image generated with a handful of CSS and JS? Nice!'

Then I looked at the CSS and saw embedded image BLOBs.

Collapse
 
hackercabin profile image
Simon

Yes, for the noise grain effect. I may look at that again, but base64 images seemed like the best way for that effect. Do you have a better suggestion for that?

Collapse
 
trueneu profile image
Pavel Gurkov

Ah, no, no. Basically I was just wondering how much of it is generated and how much comes from the BLOB. I'm a total idiot regarding frontend, so I don't have much to propose unfortunately. If that's only for the grain effect, that's still impressive!

Now I wonder if you could emulate a realistic grain effect. I bet you could, but I have no idea how complex would it be...

Thread Thread
 
hackercabin profile image
Simon • Edited

Yeah it does seem a bit of a get-out on my part to use a bg image at all even if just for that effect, it does spoil the otherwise quite small css. I pondered using some divs with random pixels in. I did a bit of research about noise grain effects and there seems to be no effective way to create a noise effect cleanly in css even in 2021.

Thanks for the feedback!

Thread Thread
 
trueneu profile image
Pavel Gurkov

Oh I see. That’s a pity.

Nevertheless, looks really cool :)

Collapse
 
ironcladdev profile image
Conner Ow

I'm not really skilled in SVG, but I think I've seen people use SVG masking to make a noisy effect.

Thread Thread
 
hackercabin profile image
Simon

Thank you, I will look into that.