If you spend a little time browsing Codepen, you can see how powerful CSS, SVGs, and animations are, and how creative people can get. I'm continuously trying to experiment with and learn more about them, not just in the context of designing a website, but to build cool, standalone - and fun - projects.

Just for fun, I wanted to create a series of team logos after coming across a site that makes fan accessories for various soccer (football) teams. The designs were notably simple, minimal, with just fundamental shapes, and that was what made them so aesthetically pretty. They didn't include everything intricate detail of the logos, yet they were instantly recognizable. I decided to try to replicate similar designs. In these posts I will write briefly on any aspects I found interesting or challenging while creating each piece.

Things I tried to keep in mind:

• make sure it’s recognizable
• try to minimalize without taking away from the essence of the original - break down into basic shapes but keep features that are very emblematic

---

FC Barcelona

Stripes appear in two areas and can be considered a very important part of the identity of the team. Because the bottom section only requires four of the stripes, I used two elements that use border-width to create the look of vertical bars.

.blue-stripes {
      height: 120%;
      width: 18px;
      border-width: 0px 16px 0px 16px;
      border-color: #004d98;
      border-style: solid;
      background-color: #a50044;
      display: inline-block;
}

In this case the border to the left and right are wide and form the stripes. It’s also important to remember to use overflow: hidden when using all these various shapes overlaying on each other.

This emblem was overall simple to do with CSS because it clearly uses basic shapes, like a circle, vertical stripes, and a cross. Depending on the complexity, I chose between using CSS or drawing out an SVG.

*Bonus

There is another simple way building stripes using repeating-linear-gradient(src: css-tricks).

background: repeating-linear-gradient(
  to right,
  #0b2e89,
  #0b2e89 10px,
  #a50044 10px,
  #a50044 20px
);