Color Palatte using SVG for gradient mask

Go to Source

See the Code
See it Full Page
See Details

While working on a web project, I needed an easy way to keep track of my color palatte hex values, regardless of the application being used . I made this page to be fully responsive so that the browser window can be sized down very short or narrow, and moved to the edge of the screen for easy access. The bit of JS selects/ deselects the hex value when a swatch is clicked for easy copy & paste. And, a custom eyedropper cursor because, well why not?

I made this while playing around with the use of SVGs as responsive full-width backgrounds. I made a non-SVG pen also, but this one uses a nice gradient effect, which wouldn't be as good if done with just CSS. There are certainly other benefits of using inline SVG when if comes to design details like this, as well as transitions/animations.

I know that JS is probably a convoluted way of selecting and deselecting the text of an element when clicked, but it seems to work. I'm new at JavaScript so I welcome any pointers 🙂

The simplified version, without using SVG, is here-

This Pen uses: HTML, CSS, JavaScript, and