How to create a yin-yang symbol with pure CSS
Tags: css, tutorial
Published: 2020-01-06 16:05:47

---
title: How to create a yin-yang symbol with pure CSS
published: true
date: 2019-12-27 14:00:15 UTC
tags: css, tutorial
canonical_url: https://blog.logrocket.com/how-to-create-yin-yang-symbol-pure-css/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/czhbb3cwldizu3ft4f2d.png
---
**Written by [Maks Akymenko](https://blog.logrocket.com/author/maksakymenko/)**✏️

As developers, we often spend a lot of time styling elements. Whether it’s a simple website or a complex application, we can’t make it great without a good deal of CSS. It’s not always as simple as it seems, and some tasks are quite complex. However, if you have the right skills, you can come up with solutions to these problems relatively easily. That’s why practice makes perfect.

[![LogRocket Free Trial Banner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/f760c-1gpjapknnuyhu8esa3z0jga.png?resize=1200%2C280&ssl=1)](https://logrocket.com/signup/)

One way to practice CSS is to recreate pictures, icons, or drawings with pure CSS. In this tutorial, we’ll create a yin-yang symbol with pure CSS and only one line of HTML. We’ll review the usage of [pseudo-classes](https://css-tricks.com/pseudo-class-selectors/) and different border properties, and you’ll see how easy a task like this can be if you hone your skills and practice regularly.

{% codepen https://codepen.io/maximakymenko/pen/GRgWWKb %}

## 1. Create a shape

Let’s start with the shape of our yin-yang. As I mentioned before, this exercise requires only one line of HTML:

```jsx
<div class="yinyang"></div>
```

Now let’s dive into styling.

We need to create a round shape and add black and white colors to differentiate the two sides of our yin-yang body. To do so, we’ll use a simple trick with the `border-width` property:

```jsx
.yinyang {
  position: relative;
  background: #fff;
  height: 100px;
  border-color: #000;
  border-style: solid;
  width: 50px; 
  border-width: 2px 50px 2px 2px;
  border-radius: 50%;
} 
```

We’ll use `position: relative` to add more shapes inside our body. The tricky part, however, is that we specified our `width` as a `50px` and also set the `border-width` to `2px 50px 2px 2px`.

The [`border-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) property allows us to specify the width of each individual side: top, right, bottom, and left, respectively. You’ll see that we set the right side to `50px`, which, combined with the width, adds up to a total of `100px`, equal to our `height` property.

Now we’ve got a square, so we’ll set the `border-radius` to `50%` to make it a circle.

The left side is white because of the `background` property, and the white side is black because the `border-color` is set to black.

![Yin-Yang Symbol Background Built With Pure CSS](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2019/12/css-yin-yang-exercise-background-1.png?resize=730%2C350&ssl=1)

Pro tip: to center the shape horizontally, just use the [`flex`](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout) property on the `body`, as shown below.

```jsx
 body {
  display: flex;
  justify-content: center;
}
```

## 2. Build inner circles

The concept behind both circles is the same; we’ll use CSS pseudo-elements, such as `:before` and `:after`, for that. Pseudo-elements allow you to create elements that are not on the [DOM](https://www.w3schools.com/js/js_htmldom.asp) and style a specific part of an element’s content. Best of all, they enable you to add extra styling to a website without adding extra markup.

Let’s start with [`:before`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width).

```jsx
.yinyang:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  background: #fff;
  border: 18px solid #000;
  border-radius: 50%;
  width: 14px;
  height: 14px;
}
```

Remember, always add a `content` property to get the pseudo-element to work.

We positioned our first inner circle absolutely, and because our parent has `position: relative`, the properties `top` and `left` are set relative to it. This allows us to center the first inner circle. If you take a closer look, you’ll see that it’s just a white circle with a bold (18px) border around it.

![Yin-Yang Symbol Inner Circle Built With Pure CSS](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2019/12/css-yin-yang-exercise-black.png?resize=730%2C315&ssl=1)

The next step is to do the same with our bottom circle. The only difference is that we’ll invert the colors to generate a black circle with a white border using the [`:after`](https://developer.mozilla.org/en-US/docs/Web/CSS/::after) pseudo-element.

```jsx
.yinyang:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: #000;
  border: 18px solid #fff;
  border-radius: 50%;
  width: 14px;
  height: 14px;
}
```

As you can see, the styling looks almost identical, with the only difference being the colors.

![Completed Yin-Yang Symbol Built With Pure CSS](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2019/12/css-yin-yang-exercise-black-white.png?resize=730%2C294&ssl=1)

## 3. Add simple animation

Now we’ll create a simple animation to make our work more interactive. If we want to make it a spinner, for instance, we can add some rolling animation using [`@keyframes`](https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp).

We’ll only need two lines of code to make the symbol roll. We’ll call our animation `roll` and define two properties inside: `from` as the initial point and `to` as the finish point.

```jsx
@keyframes roll {
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(3600000deg);
  }
}
```

Obviously, we start from `0deg`, and we don’t want our animation to ever stop. The huge number ensures that our yin-yang will roll forever.

The last step is to add the [`animation`](https://www.w3schools.com/cssref/css3_pr_animation.asp) property to our element, which is actually a shorthand for many different properties, such as `animation-name`, `animation-duration`, etc. So let’s add the animation to our `.yinyang` class.

```jsx
animation: roll 40000s infinite;
```

![Animated Yin-Yang Symbol Built With Pure CSS](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2019/12/css-yin-yang-exercise-animation.gif?resize=730%2C348&ssl=1)

## Conclusion

Now you have a finished, continuously rolling yin-yang composed entirely of CSS. More importantly, you’ve learned something new and sharpened your CSS styling skills from this exercise.

Feel free to modify this element or use it as a foundation to create something even cooler. That’s another fun and effective way to polish your CSS skills. If you know the basics, you’ll feel more comfortable when working on complex projects.

* * *
## Is your frontend hogging your users' CPU? 

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, [try LogRocket](https://logrocket.com/signup/).

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/lrvuxcs6o2kosibp83gt.png)

[LogRocket](https://logrocket.com/signup/) is like a DVR for web apps, recording everything that happens in your web app or site. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web apps — [Start monitoring for free](https://logrocket.com/signup/).
* * *

The post [How to create a yin-yang symbol with pure CSS](https://blog.logrocket.com/how-to-create-yin-yang-symbol-pure-css/) appeared first on [LogRocket Blog](https://blog.logrocket.com).