Sometimes, when we make seamless patterns out of several objects, we need to deal with the situations where the objects are on the borders. Usually we create copies of the objects and place them at proper positions to make the tiling work with no seams.
In CSS, there's a possible way to do it without creating
copies manually or doing any calculations to the positions,
by utilizing the CSS background
property.
Background in CSS is repeatable by default,
if we create objects using background
or background-image
,
they can be tiled automatically regardless of their positions.
Pattern fragment
We start with specifying the size of the fragment which is being used for tiling. This is an essential step since it determines the repeatable space of the pattern.
Create a circle object using radial-gradient
in the background.
The circle is being tiled properly even though you can't see the edges.
Move it to somewhere else using background-position
.
No need to worry about getting over the edges,
the browser has taken care of it for us.
We can add more objects by adding more background images.
This element can be used to make a seamless pattern by tiling. The only problem is that the element itself cannot be tiled as easily as background images. We need to create many identical elements and place them in the grid. Although taking a screenshot of the element and saving it in PNG format is a quick solution.
Using css-doodle
One of the exciting features css-doodle provides is the ability to generate background
image from another css-doodle element with the @doodle
function.
If we create the pattern fragment in css-doodle, it can be used for background image.
Which means the pattern fragment can be tiled.
Using gradients to create shapes is rather limited.
Fortunately, the
I know it's a bit confusing at first. So let's take another example from this demo on CodePen,
and recreate the pattern #11 step by step.
We still start from the pattern fragment,
add its background color, setup its width and height both to
We're going to create a new shape for the elements in this pattern.
The
Place the shape to the
Once we have a good understanding of how this works, add more objects and place each of them with
Now we put the whole pattern fragment we just made into background image for tiling,
with the
I'd suggest to to create pattern fragments with design tools like PS and AI,
but it's still interesting to create something directly from the code.
So here are two ways to apply it to your websites:
Create pattern fragment in CSS or css-doodle and take screenshot of the DOM element,
or use the export() API of css-doodle to save the pattern fragment as image.
Import and use css-doodle directly.
I hope the article explains well how we can make use of CSS background repeat and css-doodle to create seamless backgound patterns.
There are coutless ways to form the objects so I can imagine this is a quite useful technique.
@doodle
function can be nested.
For example, we can replace one of the circle objects created from radial-gradient
with
another css-doodle element, inside which is a heart shape with rotation by 30
degree.
Do it again
200px
.
Note again that putting the objects inside background image is an important step. So here's the skeleton.
Add objects
@shape()
function returns a generated string of polygon()
used by clip-path
.
background-image
with @doodle
function.
It's the first object we added to the pattern.
background-position
.
Setting random background colors and transfomations will make them look better.
Tiling
@doodle
function again.
How to use it in production