• Sunday, January 21st 2018

Let's make a simple header that resembles this tent. Because why not. ### Thought process

What we're looking to achieve is honestly quite simple. Without having to mess around with paths, let's try to follow the less complex solution.

We will

1. Draw two consecutive rectangles
2. Draw two circles with their diameter matching the end of the rectangles

### First Steps

Let's start by placing the two rectangles we mentioned, covering the 100% of our viewBox's width.

Since the lower part of the Y-axis will be filled with our circles, we'll stop the rectangles around the 75% of the viewbox height.

``````<svg viewBox="0 0 100 100"  xmlns="http://www.w3.org/2000/svg">

<rect y='0' width='50' height="75" style="fill:#ffd3db;" />
<rect x='50' y='0' width='50' height="75" style="fill:#fff;" />
</svg>``````

Afterwards we need to add the two circles. I will use a different color for you to notice the exact placement

``````  <circle style="fill:#ffd3db;" cx="25" cy="70" r="25" />
<circle style="fill:#fff;" cx="75" cy="70" r="25"/>``````

Finishing up, let's add some shadow, in order to make it feel less flat

``````  <defs>
</filter>
</defs>
<circle style="fill:#ffd3db; filter:url(#shadow);" cx="25" cy="70" r="25" />
<circle style="fill:#fff; filter:url(#shadow);" cx="75" cy="70" r="25"/>
</svg>``````

### Final Code

Finally let's set it as background image, and let it repeat itself like crazy

``````<svg viewBox="0 0 100 100"  xmlns="http://www.w3.org/2000/svg">

<defs>
</filter>
</defs>

<rect y='0' width='50' height="75" style="fill:#ffd3db;" />
<rect x='50' y='0' width='50' height="75" style="fill:#fff;" />
<circle style="fill:#ffd3db; filter:url(#shadow);" cx="25" cy="70" r="25" />
<circle style="fill:#fff; filter:url(#shadow);" cx="75" cy="70" r="25"/>
</svg>``````

### Make it sexy

Ok, let's switch to Codepen now. How about:

1. Including some branding
2. Adding a nice 'Open' sign