This is a submission for Frontend Challenge - June Celebrations, CSS Art: June Celebrations.
Inspiration
World Sea Turtle Day (June 16) celebrates these ancient mariners who have navigated Earth's oceans for over 100 million years. Sea turtles are incredible creatures that face numerous threats, from plastic pollution to climate change.
This CSS art honors their graceful swimming patterns and the underwater world they call home.
Demo
Journey
This piece challenged me to recreate the elegant motion of sea turtles gliding through water. I used CSS animations to simulate their distinctive swimming pattern - the way they gracefully move their flippers in a synchronized rhythm.
The turtle shapes are created entirely with CSS, using clever combinations of border-radius, transforms, and pseudo-elements.
The underwater environment features floating seaweed created with CSS animations and a gradient background that mimics the way sunlight filters through ocean water.
I experimented with different animation delays to make each turtle move independently, creating a more natural scene.
What I'm most proud of is the organic feel of the animations - they don't feel robotic or mechanical. The turtles seem to truly "swim" through their digital ocean.
In future iterations, I'd love to add bubbles, more diverse marine life, and perhaps simulate the turtle's journey from nest to ocean.
Top comments (0)