I've been following the CSS in-depth course by
on Frontend Masters
to learn much of this stuff. I recommend you go check out her work. The slides
she use while teaching comes with a bunch of examples and playgrounds and
are available on her website.
Mimicking a vinyl record
As a demo of a radial gradient I figured I wanted to make a
CSS version of a vinyl record.
I started out with a simple radial gradient with just the main blocks of color.
Expanding on the simple version and making use of the ability to have
multiple background images
I made a version where a regular radial gradient is in charge of
rendering the non-repeating parts of the record and a repeating radial
gradient renders the body of the record with grooves.
I wanted to see whether I could create a neat effect using a radial
cursor on desktop.
The solution is pretty straight-forward, with one caveat: the element
showing the gradient should be position: relative;. This
lets you use the event.layerX and event.layerY
properties of the mousemove event