Norway


Creating is the most intense excitement one can come to know.

Anni Albers, On Designing

I recently wrote a post — that was shared here on CSS-Tricks — where I looked at ways to use characters to create interesting (and random) . Since then, I’ve continued to seek new characters to build new . I even borrowed a book about Unicode from a local library.

(That’s a really thick book, by the way.)

It’s all up to your imagination to see the possible patterns a Unicode character can make. Although not all characters are good as patterns, the process is a good exercise for me.

And, aside from Unicode itself, the methods to build the patterns may not be so obvious. It usually takes a lot of inspiration and trial and error to come up with new ones.

More tiling

There are actually many ways to do tiling. Here’s one of my favorite tile patterns, which can be easily achieved using CSS grid:

A series of squares that vary in size from small to large and are arranged in a masonry pattern.  - unicode 1 - More Unicode Patterns | CSS-Tricks
.grid {
  /* using `dense` to fill gaps automatically. */
  grid-auto-flow: dense;
}

.cell {
  /* using `span` to change cell size */
  grid-column-end: span <num>;
  grid-row-end: span <num>;
}

Grid Invaders by Miriam Suzanne is a good example of this technique.

Now, what I’m trying to do is put some Unicode characters into this grid. And most importantly, update the font-size value according to the span of its cell.

A series of red and orange Chinese Unicode characters arranged in the grid pattern of the previous image.  - unicode 2 - More Unicode Patterns | CSS-Tricks
Pattern using characters 2f3c through 2f9f

I only tested with Chrome on Mac. Some of the examples may look awful on other browsers/platforms.

.cell {
  /* ... */
  --n: <random-span>;
  grid-column-end: span var(--n);
  grid-row-end: span var(--n);
}

.cell:after {
  /* ... */
  font-size: calc(var(--n) * 2vmin);
}

It’s a bit like the Tag Cloud effect, but with CSS. Lots of patterns can be made this way.

A series of orange and red 2686 and 2689 Unicode characters arranged in the same grid pattern as the other examples.  - unicode 3 - More Unicode Patterns | CSS-Tricks
Pattern using characters 286 through 2689
Unicode characters 21b0, 21b1, 21b2 and 21b4 arranged in the same grid pattern as the other examples. The effect is like a series of arrows pointed in different directions.  - unicode 4 - More Unicode Patterns | CSS-Tricks
Pattern using charaters 21b0, 21b1, 21b2 and 21b4

The span of the columns and rows don’t always have to be the same value. We can make small modifications by changing how many rows each cell spans:

The grid layout with taller columns now that each cell spans more rows.  - unicode 5 - More Unicode Patterns | CSS-Tricks
.cell {
  /* only change the row span */
  grid-row-end: span <num>;
}

Since the font-size property scales up/down in both directions (vertically and horizontally), the scaleY() in the transform property will be used instead.

Red and blue diamond-shaped Unicode characters squeezed into the taller, thinner columns of the grid layout.  - t2 - More Unicode Patterns | CSS-Tricks
Pattern using characters 25c6 through 25c8
:after {
  /* ... */
  transform: scaleY(calc(var(--span) * 1.4));
}

And here’s another one, made by rotating the inner container of the grid to some degree.

Red and blue triangles pointed diagonally in the grid layout.  - unicode 7 - More Unicode Patterns | CSS-Tricks

The triangles also can be drawn with clip-path and will be more responsive, but it’s nice to do something in a different way.

More modifications to the layout:

The grid layout with skewed cells so that they form repeating parallelograms instead of rectangles.  - unicode 8 - More Unicode Patterns | CSS-Tricks
.column-odd {
  transform: skewY(40deg);
}

.column-even {
  transform: skewY(-40deg);
}

Now follow these transformations for each column.

Plus sign Unicode characters in green, red, yellow and gray that follow the parallelogram pattern of the updated grid, forming a crochet-like effect.  - unicode 9 - More Unicode Patterns | CSS-Tricks
Pattern using characters 1690 through 1694

Composition

Many Unicode pairs share some kind of shape with different angles. For example, parentheses, brackets, and arrows with different that go in different directions. We can use this concept to combine the shapes and generate repeatable patterns.

This pattern uses less-than and greater-than signs for the base:

Wavy pattern using <code><</code> and <code>></code>  - unicode 10 - More Unicode Patterns | CSS-Tricks
:nth-child(odd):after {
  content: '<';
}

:nth-child(even):after {
  content: '>';
}

Here we go with parentheses:

- unicode 18 - More Unicode Patterns | CSS-Tricks
A wavy pattern using ( and )
:nth-child(odd):after {
  content: '(';
}

:nth-child(even):after {
  content: ')';
}

These are characters we use everyday. However, they give us a fresh look and feeling when they are arranged in a new way.

There’s another pair of characters, , and . Placing them in the grid and scaling to a proper value connect them together into a seamless pattern:

- unicode 11 - More Unicode Patterns | CSS-Tricks

It’s like weaving with characters! We can even take it up a notch by rotating things:

- unicode 12 - More Unicode Patterns | CSS-Tricks
Pattern using 169b and 169c

Rings

Last , I joined a CodePen Challenge that challenged the to make a design out of the sub and sup elements. As I experimented with them, I noticed that the two tags scaled down automatically when nested.

- unicode 13 - More Unicode Patterns | CSS-Tricks

So, I tried to put them around a circle:

- unicode 14 - More Unicode Patterns | CSS-Tricks
.first-level {
  /* Slice the circle into many segments. */
  transform: rotate(
    calc(360deg / var(--slice) * var(--n))
  );
}

Suddenly, I realized this method can be used to generate background patterns, too. The results are pretty nice.

The Unicode characters for less-than and greater-than signs repeated in a circle that starts large around the edge and narrows in, like the characters are flushing down a drain.  - unicode 15 - More Unicode Patterns | CSS-Tricks
Pattern using

LEAVE A REPLY

Please enter your comment!
Please enter your name here