Apple M1 Release Graphic in Pure CSS

[CarlyRaeJepsenStan]

Project URL: https://codepen.io/carlyraejepsenstan/pen/eYzQRKr
Glitch: https://apple-m1-css.glitch.me

Not hosted on glitch, sorry But I made this cool codepen look like the Apple m1 release graphic!
Edit! Now it’s on glitch. enjoy!

[code-alt]

You can’t post in #the-gallery if it’s not hosted on Glitch. It does look quite nice though.

[CarlyRaeJepsenStan]

Haha, it’s on glitch now and thanks!

[wh0]

For reference, here’s the graphic that this is based on:

from https://www.apple.com/mac/m1/

[javaarchive]

FYI this does not render correctly cause I don’t think apple sign exists on other computers.
Short story: I once made an nitrotype account with an apple sign in the username and afterwards realized I couldn’t log in because of it.

If you can, you should consider animating it

[code-alt]

So everything except MacOS?

[CarlyRaeJepsenStan]

Thanks javaarchive, I’ll try animating it.
Edit: Now both links are animated - it’s pretty simple, let me know what you think.
That sucks about the apple icon. If anyone has any ideas of what I can do (transparent apple logo svg? But then I don’t have the gradient…) please comment with them!

For people who just see a square, here’s how it should look:

[Techy]

It only shows on Apple devices, so MacOS & iOS.