The Single Div trend & Making the React Logo.
Tags: tutorial, webdev, css, html
Published: 2021-02-08 14:13:21

**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](https://dev-to-uploads.s3.amazonaws.com/i/x3x5w638kkixi9s3h3vw.gif)

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). 

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

**CSS**
**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](https://dev-to-uploads.s3.amazonaws.com/i/h6wzge8wele13ln86jm9.png)

**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.
`div{
  @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](https://dev-to-uploads.s3.amazonaws.com/i/093ewdrgyf1kedlhzs51.png)
`&:before {    
    transform: rotate(60deg);
  }
  &:after {
    transform: rotate(-60deg);
  }`
Now we are only left with the nucleus. 

**Nucleus**
We use `radial-gradient` with the background property applied to the div for creating the nucleus as follows.
![Complete react logo](https://dev-to-uploads.s3.amazonaws.com/i/e0nl7ziy1la7bpwj7rsp.png)
`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.

{% codepen https://codepen.io/akshaya-venkatesh8/pen/eYZdaOy default-tab=html,result%}

There is so much that can be done with just a single div. Be sure to checkout [a.singlediv.com] (https://a.singlediv.com) by [Lynn Fisher] (https://twitter.com/lynnandtonic) who started this trend. Let me know about your single-div creations in the comments or reach me on [Twitter] (https://twitter.com/venkyakshaya).  Thank you for reading!