Miami Sunset CSS Art

10 September 2021

Helen made this black-and-white art for our baby to look at. He’s old enough to see colours now, but newborn babies can only really see high-contrast shapes well, so you can get black-and-white books and stuff for them… or make something yourself!

I love that Helen made this (and other pieces)… I think they’re really cool. And a display of care and love.

When I saw it, it made me think of kites and yachts on moving waves. It has an 80s vibe. I wanted to make a digital version where the shapes move and bob with a peaceful energy.

I made it on Glitch, so you can remix it and make your own if you want. It’s my first time playing with CSS art and animations in this way. Check it out:

https://kitesurf.glitch.me/

What I learned

You can use clip-path to make goofy shapes in CSS. All of Helen’s waves are roughly cut, bent-looking rectangles. I could recreate that with rules like this:

.wave6 {
	background: #e92e96;
	clip-path: polygon(0 0, 40% 5%, 100% 7%, 100% 75%, 80% 80%, 0 70%);
	top: 610px;
	left: 130px;
	width: 870px;
	height: 40px;
}

Animation keyframes are cool:

@keyframes HEAVE {
	0% {
		transform: rotate(0);
	}
	50% {
		transform: rotate(4deg);
	}
}
.heave {
	animation: HEAVE 5s infinite;
}

…and I thought of a way of composing animations using atomic CSS classes so that I could make each element animate slightly differently:

.5s {
	animation-duration: 5s;
}
.6s {
	animation-duration: 6s;
}
...
.a {
	animation-direction: alternate;
}
.r {
	animation-direction: reverse;
}
.d1 {
	animation-delay: 0.5s;
}
.d2 {
	animation-delay: 1s;
}

Then in the HTML:

<div class="jitter r 6s d3">
	<div class="kite3"></div>
</div>

I realised I had to wrap most of the elements in an extra div for their animations, because a lot of the elements are designed with transform rules to rotate them, and if I added an animation it would override that transform, and they’d snap to the wrong position/rotation.

In Conclusion

Enjoy this art, and maybe you could make your own? 😊

Just go to the kitesurf project on Glitch and you can check out my source code or even click Remix to copy it and start your own.

See you next time 🌇🌴