DEV Community

loading...

CodePen - Generative Soft Gradients [SVG]

George Francis
UI developer ⚡️ Generative everything ❤️ I write about creative coding & front-end development ✨
Updated on ・1 min read

I have been seeing these soft + colorful gradients around a lot recently and thought it would be cool to make some generative ones. They pair really nicely with the new "glassmorphism" trend!

Discussion (4)

Collapse
jamesrweb profile image
James Robb

Again, some awesome work dude, you’re really good at this kind of thing!

One question, I’ve never used the ~~ operator before, can you explain what you use that for perhaps?

Collapse
georgedoescode profile image
George Francis Author

Ah, thanks so much James!

For sure, ~~ is being used here in place of Math.floor() to remove the decimals from the number. It is a habit i got into as it is slightly faster and a bit more terse, but honestly it's probably not the best for readability!

I'm actually not sure why I added it there now, perhaps I was planning on stripping the decimals from the values to make the SVG markup a little nice when inspecting, but I didn't follow through in the rest of the pen :)

Collapse
jamesrweb profile image
James Robb

I see, curiously, and maybe you don't have the answer but: I assume ~ does one things and ~~ does another? Like ! and !! for example. Do you know what that difference is though?

Thread Thread
georgedoescode profile image
George Francis Author

Oof, that's about the limits of my knowledge I'm afraid. I know that you are correct in saying a single tilde does another thing, but I have no idea what!

Forem Open with the Forem app