Today is the warmest day so far in Nottingham, where the sun’s out, the temperature is rising, and everyone would rather be outside in a nice garden with a cool drink in their hand.
But time, and good code, does not stop for warm weather, and those long days are a good time to pick up new bits of code to build on your existing skills.
Here are five Codepens I found that make me think of summer – bright colours, warm tones, and nature all around.
TinyPolyWorld – ThreeJS experiments by Zultan
See the Pen TinyPolyWorld – ThreeJS experiements. by Zultan (@Zultan) on CodePen.
An adorable little experiment with JavaScript, this little plane moves with your move over a beautifully rendered polygonal world. If you want to draw with JavaScript, this is a good Codepen to dig into.
GSAP SVG Plants by Mikhail Panichev
See the Pen GSAP SVG Plants by Mikhail Panichev (@denisinvader) on CodePen.
Mikhail took SVGs from an Illustrator tutorial and beautifully animated them using JavaScript and CSS to give you three sweet little succulents that look wonderful.
CSS Shapes Forest Collection Spring Summer 2020
See the Pen CSS Shapes Forest Collection spring summer 2020 by Paulina Hetman (@pehaa) on CodePen.
Not only does this make me think of campgrounds, pine-fresh air, and roasting marshmallows, all the images are built in CSS and then there’s a fantastic little bit of JavaScript to give you a fantastic layout.
To-Do Terrarium by Olivia Ng
See the Pen To-Do Terrarium by Olivia Ng (@oliviale) on CodePen.
This is such a great to-do list that I wish I could have it all the time for all my must-do items. Tick things off, get beautiful plants growing.
Animal Crossing: Isabelle’s Day Off (Pure CSS) by Tee Diang
See the Pen Animal Crossing: Isabelle’s Day Off ☀️(Pure CSS) by Tee (@acupoftee) on CodePen.
Animal Crossing has been my springtime delight and this pure CSS design by Tee really shows off the adorableness while also being ridiculously clever. It’s soothing to look at, it’s a wonder of CSS, and she’s also produced a coding timelapse with links to resources.
