Hello! This is a shepard tone generator. It generates sound on the same note in every audible octave at once, and raises the frequency of each sound. Once a frequency reaches the highest audible frequency (20khz), it resets to the lowest audible frequency (20hz) and rises again. This creates an illusion of a forever-rising sound.
This video is a good explanation of how this works: https://youtu.be/PwFUwXxfZss
---
While making this, I had more than a little help from the Web Audio API documentation.
https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API
https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API

This is how you can make a 3D rotating div, image, or whatever, that looks fairly convincing, just with some plain ol' CSS. I had to build something like this for a site I was building at work and I decided to post it here. Enjoy!
It doesn't work well/at all on Internet Explorer, though. This specific example is broken on IE11 right now, but I've gotten it to kind of work (less convincingly so than normal) on IE11 in other implementations.
---
UPDATE: I worked on this more to try to fix it in IE, and I don't think you can. There are fixes that used to work, but IE recently introduced a new bug that they apparently do not plan to fix.
https://stackoverflow.com/questions/32184803/backface-visibility-not-working-in-ie11
https://connect.microsoft.com/IE/Feedback/Details/2474735
Not much you can do about that I guess. So if it works in IE then it works, but if not then it probably isn't worth trying to fix, it'll just be a waste of time. Try to get clients who want this kind of fancy animation on Edge or Chrome/FF instead.

This is something I built for a site recently that I thought was pretty cool. It's basically a circle-shaped selector with an image in the middle, and a different image and accompanying content will show up depending which number on the circle is selected.

Riding on an empty highway in the dead of night, he wonders to himself if he will ever be the same.
I tried my best to make this fully responsive, but it's best viewed on desktop in fullscreen mode, or at least in landscape.
---
Recommended listening: https://www.youtube.com/watch?v=9pItCF_JjJw
Useful links:
https://css-tricks.com/snippets/css/css-repeating-gradients/
---
Some notes:
For the cliff linear-gradients, x x / x x is {bg-position} / {bg-size}. In other words, shorthand for:
background-position: 1px 0;
background-size:6.2vw 100%;
The / is not a math symbol.
https://developer.mozilla.org/en-US/docs/Web/CSS/background#Syntax
I'm basically using this to repeat lots of triangles in order to make fake mountains. I've rarely if ever seen this shorthand used in a linear-gradient, so I thought I'd specify.

I wanted to do some fancy stuff with CSS animations. Feel free to take inspiration (or code) from this pen. I'll be adding to this over time whenever I come up with any more.
Very useful:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
http://cubic-bezier.com/
https://css-tricks.com/almanac/selectors/n/nth-child/