DEV Community

Cover image for The Single Div trend & Making the React Logo.
Akshaya Venkatesh
Akshaya Venkatesh

Posted on

The Single Div trend & Making the React Logo.

What to expect?
This blog explains why creating single div art is a popular trend and how to build the React JS logo with just one div and pure CSS.

What is the "Single Div" hubbub all about?
Let us consider a basic example - creating a series of different colored dots. I could just create an array of elements and assign different colors to them but if I am given a condition that I may use only one div element - I will choose to use the background property (among other ways) to achieve the same. This is the main reason for the popularity of this trend. It challenges the developer to harness or exploit many CSS properties that would not be used otherwise.

Breaking down the React logo

Animated React Logo

The logo is pretty straightforward - there are three elliptical orbits with a nucleus at their center in what I like to call "React Blue" (hex code - #61dafb).

As promised, HTML will have nothing but a <div /> tag.

Orbit shape
For the orbit's elliptical shape, we first create a class that can style all three orbits. It simply uses the border properties to define the shape.

.logo-orbit {
height: 100px;
width: 300px;
border-radius: 50%;
border: 10px solid $react-blue;

This can style any div to look something like this 👇

React logo central ellipse orbit

The 3 orbits
For the central orbit, select the div tag and apply the .logo-orbit class. I have used Scss and extended the class name in the styles.
@extend .logo-orbit;

For those not familiar with Scss, please replace @extend .logo-orbit with styles in the .logo-orbit class.

Next, we use the :before and :after pseudo-selectors. These are conventionally used for inserting content but here we use them for the other two orbits as follows.
:before, :after {
@extend .logo-orbit;
content: "";
position: absolute;
top: -10px;
left: -10px;
box-sizing: inherit;

It is worth noting that although box-sizing is an inherited property, the pseudo-elements do not inherit them and require an explicit inheritance.

Next, we position the logo with rotation as follows.
React logo 3 orbits
&:before {
transform: rotate(60deg);
&:after {
transform: rotate(-60deg);

Now we are only left with the nucleus.

We use radial-gradient with the background property applied to the div for creating the nucleus as follows.
Complete react logo
background: radial-gradient(circle, $react-blue 24px, transparent 25px);
With that the logo is done. The complete code along with the turn animation can be found in the following Codepen.

There is so much that can be done with just a single div. Be sure to checkout by Lynn Fisher who started this trend. Let me know about your single-div creations in the comments or reach me on Twitter. Thank you for reading!

Top comments (8)

soundar24 profile image
Soundar • Edited

Hey, really nice article. Recently I developed a CSS chart library with the single div trend. If you are interested please have a look on this:

venkyakshaya profile image
Akshaya Venkatesh

Broooo! what?! This is incredible. I loved it. Amazing work. Thanks for sharing here.

jalaj profile image

Nice article...
also, you can put your code inside three backticks
to get syntax highlighting.

link2twenty profile image
Andrew Bone
venkyakshaya profile image
Akshaya Venkatesh

Thanks for the share Andrew :D

venkyakshaya profile image
Akshaya Venkatesh

Oh thanks for sharing Jalaj! I will remember that ☺️

fritzy profile image
Nathan Fritz

But you didn’t mention @lynnandtonic who I believe started this trend with ??!

venkyakshaya profile image
Akshaya Venkatesh

I am aware that Lynn creates a lot of single div art and of course the amazing but didn't know she started the trend. Thanks for the info!