10 CodePen Snippets Especially for Science Geeks

Science, technology and design are all natural companions. So it makes perfect sense that many of us in the design field are fascinated by tech and the science that makes it all possible.

In fact, many talented creative professionals have built their own tributes that show off both their grasp of science and their eye for great design. And, of course, they’ve used some of the latest web technologies to do it.

Here’s a sampling of some of the best science-related items from CodePen:

Visualizing DNA Sequences

It’s quite amazing what DNA can tell us about our bodies and the world around us. We’ve used it to solve crimes, cure disease and tell us about our ancestry. Below, you can upload or paste a DNA sequence (don’t worry, they’ve provided samples if you don’t have any on hand) and see it visualized on screen.

See the Pen Procedural Sunrise by Brandel Zachernuk (@zachernuk) on CodePen.

What’s Floating By in the Sky?

NASA is an amazing resource for just about any kind of space-related data imaginable. Developer Jamie Donnelly took data from the Near Earth Object Program and has visualized it quite nicely in the pen below. With it, you can find out which near-Earth objects (NEOs) are closest to us at the moment.

See the Pen Material form by fajjet (@fajjet) on CodePen.

Gravity is Heavy Stuff

What’s keeping you down? If you live here on Earth, it’s most likely that darn gravitational pull. The cool thing is that simulators let us play around with gravity’s effects on objects. Like this Matter.js Gravity Playground. Toss objects about and see how x and y axis changes play out.

See the Pen Three.js Eagle Flight by Baron (@b29) on CodePen.

Temperature Conversions

Whether you’re baking a cake or checking out the weather – temperature is a key measurement. Converting temperature between different units is a matter of some serious math. Thankfully, we mortals have a handy calculator that will do the hard work for us. If you ever wanted to know what the current temperature is in Kelvin, this has you covered.

See the Pen CSS 3D Solar System by Julian Garnier (@juliangarnier) on CodePen.

The Periodic Table of Elements

The Periodic Table is really a great example of science and design combining to create something memorable. Known to students worldwide, the table is grouped by an element’s atomic number, electron configurations and recurring chemical properties. Colored sections represent different types of materials. It’s both brilliant and beautiful.

See the Pen happy halloween! by Lilian (@lilianqian) on CodePen.

Geo Coordinates

Geography is all about our world and simply put, there’s no way to avoid being a part of it. What’s really cool about this pen is that it allows us to easily find our geo coordinates – otherwise known as our place in this world. Hint: Change the zoom level in the JS panel to a lower number to get a wider view of the map.

See the Pen Only CSS: Not Conflict Panel by Yusuke Nakaya (@YusukeNakaya) on CodePen.

Velocity and Pressure

The forces of velocity and pressure greatly affect our daily lives. Think of the movement in cars, trains or planes. Even our favorite sports depend upon them. Here we have a simulation using HTML5 canvas that shows the effects of these forces in liquid. Drag your mouse around both quickly and slowly to see the difference.

See the Pen #8. UI to Code – Star Wars Product Card by Praveen Bisht (@prvnbist) on CodePen.

Math-Based Drawings

Math may confuse the heck out of me, but I know it’s an essential part of design and development. One thing I never thought about was that math could actually draw (much better than me, I might add). This generator uses math to make some intricate drawings via React.

See the Pen Galleria Tbilisi – loading by Misha Tsankashvili (@Tsankashvili) on CodePen.

Physics in Data Visualization

Physics is a subject that not many necessarily understand – but we know it when we see it in action. This demo is more on the fun side, but it shows how a physics engine can make data a bit more entertaining.

See the Pen Chill the lion by Karim Maaloul (@Yakudoo) on CodePen.

The Catapult

One of the best examples of physics at work is the venerable catapult. In use since ancient times, the device has been often associated with warfare. However, many people have found much more fun uses. The example below lets you stack up blocks and launch them.

See the Pen The Last Experience by Gerard Ferrandez (@ge1doot) on CodePen.

Science + Design = Intertwined

When you get right down to it, science is what enables us to do our jobs. Without the Periodic Table (thanks #14, Si) and computer science, design is forever analog-only. So take a moment to celebrate the people who have given us the ability to work with computers, along with all of the other advancements we so often take for granted. Three cheers for science!

See the Pen Fuzzy Creature by Szenia Zadvornykh (@zadvorsky) on CodePen.