s-thom/bg3-music-box

🪈 BG3's bard tracks

More info

About me

I'm a guy that writes code. Whether anybody uses it or not doesn't really matter.

This README

The SVG used at the top of this README is based on the version I use on my personal website. It's done in pure SVG using SMIL to control the animation. Each "wave" has a list of variations that it cycles between, and each one's animation cycle is offset slightly so they aren't all stopping/starting at the same time. Waves themselves are generated using a variation on the midpoint displacement algorithm, where new control points are added halfway between existing ones. Each iteration of the algorithm also reduces how much each control point contributes to the overall height.

• CSS Tricks: A Guide to SVG Animations
• SVG wave animation generator (the original inspiration for my own implementation)
• Font: Jost*