In this article our goal is to create an Amazon Alexa Echo Dot in CSS, HTML and JS.
You can see the full code on Codepen and feel free to experime...
For further actions, you may consider blocking this person and/or reporting abuse
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.
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?
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...
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!
Oh I see. That’s a pity.
Nevertheless, looks really cool :)
I'm not really skilled in SVG, but I think I've seen people use SVG masking to make a noisy effect.
Thank you, I will look into that.
Cool!
Super cool! Does [...array(79)] create an array of length 79? Also, I’ve been using createElement and appendChild - how does that differ from clone node?
Thanks Conrad. Yep it does. To be honest there's lots of different approaches to achieve the result I was after. I am sure yours is also valid.
Here is more info developer.mozilla.org/en-US/docs/W...
Hey, bro thanks for sharing but you can make it responsive too ;)