More Unicode Patterns

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.


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 Unicode characters to create interesting (and random) patterns. Since then, 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.

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:

.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.
Pattern using characters f3c through f9f
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.
Pattern using characters 86 through 89
Pattern using charaters b0, b1, b2 and b4
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:

.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.
Pattern using characters c6 through c8
: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.

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:

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

.column-even {
transform: skewY(-40deg);
}
Now follow these transformations for each column.
Pattern using characters 90 through 94
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:
<img src=”https://cdn.css-tricks.com/wp-content/uploads/2018/06/unicode-10.png” srcset=”https://res.cloudinary.com/css-tricks/image/upload/c_scale,w_1000,f_auto,q_auto/v1528409521/unicode-10_sf2pdu.png 1000w, https://res.cloudinary.com/css-tricks/image/upload/c_scale,w_848,f_auto,q_auto/v1528409521/unicode-10_sf2pdu.png 848w, https://res.cloudinary.com/css-tricks/image/upload/c_scale,w_554,f_auto,q_auto/v1528409521/unicode-10_sf2pdu.png 554w, https://res.cloudinary.com/css-tricks/image/upload/c_scale,w_552,f_auto,q_auto/v1528409521/unicode-10_sf2pdu.png 552w, https://res.cloudinary.com/css-tricks/image/upload/c_scale,w_200,f_auto,q_auto/v1528409521/unicode-10_sf2pdu.png 200w” sizes=”(min-width: 1850px) calc( (100vw – 555px) / 3 )
(min-width: 1251px) calc( (100vw – 530px) / 2 )
(min-width: 1086px) calc(100vw – 480px)
(min-width: 626px) calc(100vw – 335px)
calc(100vw – 30px)” alt=”Wavy pattern using < and >” />
:nth-child(odd):after {
content: ‘<‘;
}

:nth-child(even):after {
content: ‘>’;
}
Here we go with parentheses:
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:

It’s like weaving with characters! We can even take it up a notch by rotating things:
Pattern using 9b and 9c
Rings
Last week, I joined a CodePen Challenge that challenged the group 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.

So, I tried to put them around a circle:

.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.
Pattern using {$content}3e
sub:after, sup:after {
content: ‘{$content}3e’;
}
The interesting thing is that changing a single character can end up with very different results.
Combining {$content}2e and {$content}3e together to form a pattern
Combining c9 and 34 creates a different effect in the same circular layout
Wrapping up
That’s all for now! The color palettes used in this article are from Color Hunt and Coolors.co.
The examples are generated with css-doodle, except for Ring examples in the last section. Everything here can be found in this CodePen collection.
Hope you like them and thanks for reading!
The post More Unicode Patterns appeared first on CSS-Tricks.
Source: CssTricks

Posted on June 14, 2018 in css, Design, drupal design,, Drupal Developer, drupal developer austin, Drupal Development, Drupal Support, Expert Drupal Development, Mac, The, Web Design Services

Share the Story

Back to Top