5
Just realized how much math goes into a simple CSS wave pattern
I spent last Tuesday trying to make an ocean wave animation for a friends portfolio page. Nothing fancy, just some moving blue curves. I figured I would eyeball the keyframes and be done in an hour. Turns out, to keep the wave edges from snapping or distorting, you need to understand sine functions and how they map to translateX values. I looked up a few breakdowns on CodePen and one tutorial from a guy in Rotterdam, and the math was way deeper than I expected. It got me wondering, how many of you actually plan out the coordinate math before you start a piece, or do you just fiddle until it looks close enough? I never touched trigonometry after high school, so this was a wake up call for me.
1 comments
Log in to join the discussion
Log In1 Comment
theabennett1h ago
Ever tried plotting those sine points in a spreadsheet first?
3