Bistro-like tent header

📅 Sunday, January 21st 2018

2 minutes read

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

tent

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
  3. Add some shadow for finishing

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 id="shadow">
      <feDropShadow dx="0" dy="2" stdDeviation="0.3"/>
    </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 id="shadow">
      <feDropShadow dx="0" dy="2" stdDeviation="0.3"/>
    </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

Doesn't look that bad huh?

Thanks for reading!  ❤️
Next up: Hands on CSS Grid with Nietzsche
Previous: Error handling with async-await in Vue and Vuex
Due to privacy concerns, I've decided to remove Disqus.
Until I settle for another commenting solution, you can share your thoughts with me via e-mail
Back to Posts