New Twitter Logo (X) in Pure CSS

In this tutorial, I will create a new twitter logo (X) in pure css.

Recently, Twitter unveiled a new logo, replacing the blue bird with an “X”, as depicted below.

The rendering of x

The entire logo consists of a hollow “x” shape. Disregarding the hollow portion, how can a solid “x” be rendered?

There are three types of gradients: linear gradient, radial gradient, and conical gradient. It is evident that the x element can be viewed as a line segment with inclined ends, thus a linear gradient is sufficient. Assuming the HTML structure is as follows, an x element.

<x></x>

x {
  display: inline-block;
  font-size: 200px;
  width: 1em;
  height: 1em;
}

Next, a diagonal line is drawn using a linear gradient, which transitions from transparency to a solid color and then back to transparency.

It is important to consider the angle relationship in this context, as illustrated below.

x {
  /**/
  background: linear-gradient(-52deg, #0000 50%, currentColor 0 55%,#0000 0);
}

It is possible to obtain a slanted line segment.

In a similar manner, another direction can be depicted.

x {
  /**/
  background: linear-gradient(-52deg, #0000 50%, currentColor 0 55%,#0000 0),
    linear-gradient(52deg, #0000 44%, currentColor 0 56%,#0000;
}

In this manner, one obtains an “x”.

The implementation of hollowing out

When discussing the concept of hollowing out, one should consider the use of CSS mask.

The principle behind mask is straightforward: underneath the mask image, only the opaque portions are displayed, while the transparent parts are clipped, and the semi-transparent parts are handled accordingly.

In this context, due to the requirement of excavating only a small portion, this particular section becomes transparent, while the remaining sections remain opaque.

So the question arises, how can one create such a mask image?

The diagonal lines inside and the preceding linear gradient are essentially similar, with the only difference being that this section is now hollow.

Therefore, the use of mask-composite is required here, which is very similar to graphic operations in design software.

Consequently, the mask graphic above can be divided into the following two parts.

x {
  /**/
  -webkit-mask: linear-gradient(red 0 0),
        linear-gradient(52deg, #0000 48%, red 0 52%,#0000 0) 0/100% 90% no-repeat;
  -webkit-mask-composite: xor;
}

Full code implementation

x {
  display: inline-block;
  font-size: 200px;
  width: 1em;
  height: 1em;
  background: 
    linear-gradient(52deg, #0000 44%, currentColor 0 56%,#0000 0),
    linear-gradient(-52deg, #0000 50%, currentColor 0 55%,#0000 0);
  -webkit-mask: linear-gradient(red 0 0),
    linear-gradient(52deg, #0000 48%, red 0 52%,#0000 0) 0/100% 90% no-repeat;
  -webkit-mask-composite: xor;
}

The observed outcomes are as follows