Creating is the most intense excitement one can come to know.
After my last article, I’ve continued to seek new characters to build new patterns. 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.
There are actually many ways to do tiling. Here’s one of my favorite tile patterns, which can be easily achieved using CSS Grid:
Now, what I'm trying to do is put some Unicode characters into this grid. And most importantly,
font-size value according to the span of its cell.
\2f3c - \2f9f
It's a bit like the Tag cloud effect but with CSS. Lots of patterns can be made this way.
\2686 - \2689
\21b0, \21b1, \21b2, \21b4
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:
font-size property scales up/down in both directions (vertically and horizontally),
scaleY() in the
transform property will be used instead.
\25c6 - \25c8
And there's another one, made by rotating the inner container of the grid to some degree.
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:
Now follow these transformations for each column.
\1690 - \1694
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:
Here we go with parentheses:
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:
It's like weaving with characters! We can even take it up a notch by rotating things:
Last week, I joined a CodePen Challenge
that challenged the group to make a design out of the
As I experimented with them, I noticed that the two tags scaled down automatically when nested.
So I tried to put them around a circle:
Suddenly I realized this method can be use to generate background patterns, too. The results are pretty nice.
The interesting thing is that changing a single character can end up with very different results.
Hope you like them and thanks for reading!
Note: I only tested with Chrome on Mac. Some of the examples may look awful on other browsers/platforms.
(2018-06-07) Updated colors and the Composition section.
(2018-06-08) Many thanks to Geoff Graham for the review.