DEV Community

Cover image for CSS Logos: Nike logo
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

CSS Logos: Nike logo

In today's article, we'll recreate the iconic Nike swoosh logo.

For reference, this is what the logo looks like:

Nike logo

Analysing the logo

The Nike swoosh is quite iconic, and the main thing we see is one big ellipsis, with another one overlapping it.

This is all captured in a box so it won't show the overlap.
To draw this out, this is what I mean.

Nike swoosh blueprint drawing

As we see in the image, the logo has three items.

  • blue box: The container, the only thing in here, will become visible
  • red element: This ellipsis shape will be our actual logo
  • yellow element: This is what we'll use to cut out the excess inside the swoosh.

CSS Nike logo

To start, we'll only need one div, which makes things easier.

<div class="nike"></div>
Enter fullscreen mode Exit fullscreen mode

We want to make this relative to the viewport for the blue box container so our logo will scale.
I'm using a custom aspect-ratio to get them off rectangle shape.

.nike {
  position: absolute;
  overflow: hidden;
  width: 50vmin;
  aspect-ratio: 14/5;
  position: relative;
}
Enter fullscreen mode Exit fullscreen mode

Then we can start defining the red element, which will become our logo.

We want to make a box that is way bigger than our container.
We'll use the :before selector to create this element.

.nike {
  &:before {
    content: '';
    position: absolute;
    background: black;
    width: 37%;
    height: 550%;
    bottom: -134%;
    left: 70.5%;
    border-top-left-radius: 48% 17%;
    border-top-right-radius: 120% 40%;
    transform: rotate(-113deg);
    z-index: 1;
  }
}
Enter fullscreen mode Exit fullscreen mode

As you can see, the primary magic here is in the border-radius. We are using the double border radius, which is quite tricky.
And it took me a lot of tweaking to get the shape right.

If you want a more visual tester, I found this fantastic tool.

Fancy border-radius creator

So far, we have the following in play.

Nike logo setup in CSS

This is already looking great.
The last thing we need is to cut out the inner part of the logo.

For this, we'll use the :after pseudo-selector.

.nike {
  &:after {
    content: '';
    position: absolute;
    background: white;
    width: 30%;
    height: 400%;
    bottom: -73%;
    left: 64%;
    border-top-left-radius: 64% 14%;
    border-top-right-radius: 125% 46%;
    transform: rotate(-105deg);
    z-index: 2;
  }
}
Enter fullscreen mode Exit fullscreen mode

The setup is very similar as we use the double border-radius again and offset the element to the right position.

You can see the final result in this CodePen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Discussion (16)

Collapse
leewynne profile image
Lee

this is awesome

Collapse
dailydevtips1 profile image
Chris Bongers Author

Thanks a lot Lee πŸ’ͺ

Collapse
leewynne profile image
Lee

No problem, where is you goto when you want to solve a CSS issue or figure out how to do something new?

Thread Thread
dailydevtips1 profile image
Chris Bongers Author

I generally try out a lot of things.
I do always read up on other people's CSS articles here just to find new methods.

Collapse
ricardochan profile image
Ricardo Chan

Looks very cool!

Collapse
dailydevtips1 profile image
Chris Bongers Author

Thanks a lot Ricarco, happy you like it πŸ₯³

Collapse
ajshivali profile image
Shivali Pandey

Nice one

Collapse
dailydevtips1 profile image
Chris Bongers Author

Thank you Shivali πŸ’–

Collapse
technodevlopers profile image
Parth Patel

Perfect example. Thank you.

Collapse
dailydevtips1 profile image
Chris Bongers Author

Thanks a lot Parth πŸ’–

Collapse
krishnaagarwal profile image
Krishna Agarwal

Thanks for sharing these logos
Great Series 😁

Collapse
dailydevtips1 profile image
Chris Bongers Author

Thanks a lot Krishna, glad everyone is enjoying these so much πŸ’–

Collapse
atulcodex profile image
Atul Prajapati

Looks real master peace

Collapse
dailydevtips1 profile image
Chris Bongers Author

Thanks! Glad you enjoyed it Atul

Collapse
dingdingdong profile image
The D

Dude, you are a CSS God!

Collapse
dailydevtips1 profile image
Chris Bongers Author

Not really, takes me a lot of practice getting these right.
You should check out @afif 🀯