Lately I had some fun with Unicode in CSS and made several interesting background patterns with them. There's one on Codepen.
I haven't fully explored the whole Unicode table yet but I'd like to share some methods which are used to build those patterns. Hope this brings you some inspirations for web design.
The way to use in CSS
Unicode characters can easily be added to the pseudo-elements,
content property. The following code displays the arrow '→'.
A single character may not look anything special unless there are many of them being put together. One of the most common ways to do this is to put them into a grid.
The result looks appealing most of the time after applying some random rotations and color palettes to the grid content.
\15f6, \27d4, \141d
You can put different characters in the same grid. And if you're lucky, you would find several ranges of characters that fit together quite well.
\2500 - \257f
By only looking at the visual aspects of the characters you'll notice that Unicode provides a rich source of new shapes and patterns, which most of them are hard to draw in CSS.
Sometimes with small transformations to the same character, you'll get slighly different shapes. Take the wave character '⌇' for example.
So let's try to make something with random transformation for each one. Here is the result.
Or to place them around a circle along with the transformations.
Note that in first graph above, part of the intersected curves formed by the shapes of the wave characters can be used as background as well.
Comparing to the shapes hacked with HTML & CSS, one benefit of using Unicode characters is that
it's easy to add variations through properties like
And what's more, text masks.
With text mask we can use
conic-gradient as background to decorate them.
one trick here is to randomize its gradient angle to get different visual results.
\1401 - \141b
CSS has its limit but I really love the way it is and I'm sure there are more beautiful things to be discovered.
Updated: I've created a collection for all the examples: