How to design a repeating pattern

Have you always wanted to design wrapping paper but never really understood how to create repeating patterns? Well, we've put together this advanced tutorial just for you!

In this tutorial, you'll learn how to use Linearity Curve to turn your beautiful illustrations into infinitely repeating custom patterns you can print on any surface — from wrapping paper to rugs, mugs, cloth, and more.

Warning: You may start noticing patterns everywhere once you finish this tutorial!

A quick note on the art and maths of patterns

Before diving into the tutorial, let's look into examples of patterns to understand the nature behind this design style.

Patterns are a mathematical phenomenon we can observe in nature and ancient creative work. Today, repeating patterns are also important in computer programming, especially for generative models in machine learning and AI.

In sacred geometry, the mathematical precision and infinite repeatability of patterns symbolize perfection and eternity. Three shapes can be repeated endlessly without any irregularities or gaps in between: an equilateral triangle, a square, and a hexagon. This is called tessellation, a term originating in ancient mosaic tile arts.

Mosaic art is especially well-known for using repeating patterns to create large, intricate, and fascinating decorations. Repeating fabric patterns, such as those found in Japanese kimono fabrics, are also popular in decorative arts and surface design.

Another type of pattern presentation is the golden ratio, also known as the divine proportion, based on the Fibonacci sequence. Many artists and artisans have used the golden ratio to create a sense of balance and harmony in their work.

Even though this pattern is visually non-repeating (no two shapes are the same size), it's a fractal, meaning the number sequence can be repeated into infinity. Sir Roger Penrose used the golden ratio to create two shapes that could be used to tile an irregular, non-periodic pattern infinitely without repeating. This is called Penrose tiling.

In chaos theory, even seemingly random formations are thought to have underlying conditions that form “chaotic patterns” in nature.

Types of tessellation in repeating patterns

"Tessella" is the Latin root of "tessellation," meaning "small square" — the small clay, stone, or glass tiles normally used to create mosaics since ancient times. Regular tessellation describes the infinitely repeatable patterning we mentioned earlier: triangles, squares, and hexagons without gaps.

But other shapes, such as polygons or diamond shapes, may also be used. This is called irregular tessellation. Semi-regular tessellation is done with more than one type of polygon but with the corners of the tiling surface still having the same arrangement.

The 1960s Op Art movement used pattern presentations to create incredible optical illusions, such as three-dimensional space and depth. Some optical artworks seem to be moving, using lines and colors to trick your brain.

Hungarian artist Victor Vasarely created the illusion of two 3D cubes using diamond pattern tiling in hexagonal shapes for the Op Art sculpture pictured below.

If you master patterning as an art form, you can create designs that stretch infinitely over any surface. Not to mention the coolest Christmas wrapping paper your friends and family have ever seen. Are you feeling inspired to get started?

How to design a digital pattern

Now it's time to learn how to creating a repeating pattern for your custom Christmas wrapping paper.

Prepare the document

In this tutorial, Jaye Kang will guide you through creating a repeating Christmas pattern.

He will teach you step-by-step how to create this vector illustration and turn it into a seamless pattern.

To start, open Linearity Curve on your iPad and create a new document. Tap the _{ic-create-docic-create-doc} button under the "Start Creating" section or at the top-right corner of the Workspace. In the popover menu, you can import a document_{ic-import-tabic-import-tab} or create a new document _{ic-new-documentic-new-document} by choosing the size you want to work with.

Then, your first step will be to draw the snowman. You have several options for this. You can import an image of a snowman, draw a snowman on paper, and then import it into Linearity Curve to turn it into an editable version. Or draw the figure directly on the app on a separate layer.

In our tutorial, Jaye begins drawing the pattern element inside an illustration he has opened and prepared already in Linearity Curve.

We advise you to draw the pattern elements on one or several Artboards _{ic-artboardic-artboard} so that you can drag them from Artboard to Artboard later on, where all the design elements will be arranged.

To navigate your canvas, you can use different gestures _{ic-gestures-shortcutsic-gestures-shortcuts.} As you can see in the screenshot, Jaye uses gestures to zoom in _{ic-zoom-inic-zoom-in} and out _{ic-zoom-outic-zoom-out}, pan, and rotate the canvas to access the shapes better.

Draw the snowman

Before drawing, please prepare a custom color palette in Linearity Curve containing all the colors from our Hex color codes list above.

Then, you'll create a new layer _{ic-add-layeric-add-layer} to keep the elements of your Christmas pattern illustration organized. Every newly drawn shape will automatically be organized as a new element within the selected layer. The elements can be accessed separately in the layer hierarchy organized in the Layers Tab _{ic-layers-tabic-layers-tab}. To create the basic snowman shapes, Jaye used the Shape Tool _{ic-rectangleic-rectangle}.

In the Toolbar to the left side of your screen, activate the Shape Tool _{ic-rectangleic-rectangle} by tapping on the corresponding tool icon. You can access the available pre-made shapes by tapping the icon again, or the three dots button.

Use the Selection Tool _{ic-selectionic-selection} to select and move the shape you created to its desired position on the canvas.

We don't plan on drawing a blueish robot snowman but a traditional white one, so we need to change the fill color of the circular head shape from blue to white.

You can change your selected shape's fill color and stroke color with the Color Widget, located at the bottom of the Toolbar. Or the Color Picker _{ic-color-pickeric-color-picker}, accessible in the Style Tab _{ic-style-tabic-style-tab} of the Inspector.

Select the shape and access the saved color palette in the Style Tab _{ic-style-tabic-style-tab.} Tap on the target color and the source color will be automatically replaced with it.

Reduce the opacity of the circle fill, as it allows you to see the reference drawing or image while drawing.

You can reduce the opacity of your fill by using the Opacity Slider _{ic-opacityic-opacity} in the Appearance Section _{ic-appearance-tabic-appearance-tab}.

Another option is to toggle the fill _{ic-fillic-fill} of your shape off in the Color Picker _{ic-color-pickeric-color-picker} or the Appearance Section _{ic-appearance-tabic-appearance-tab} to view the underlying reference artwork.

To create the nose shape of the snowman, use the Pen Tool _ic-penic-pen. Activate it in the Toolbar and start drawing. Set the points by tapping along the sketched line. Adjust the curve by tapping, holding, and dragging the Node Handles. Release when you're satisfied with the result. Tap once on the last node to create sharp angles or deep curves.

To create the eyes of the snowman, we'll revert to the Shape Tool _{ic-rectangleic-rectangle}. Activate it in the Toolbar, and in the tool options, choose the Oval Tool _{ic-ovalic-oval}.

Tap and drag the oval on the head shape. Adjust the eye placement on the canvas with the Selection Tool _{ic-selectionic-selection} if necessary.

To create the second eye, duplicate it by selecting the original eye shape and copy-paste it. Or use the Duplicate Mode _{ic-duplicateic-duplicate}, which can be activated on the right side of the activated Selection Tool _{ic-selectionic-selection}.

One trick that Jaye used is to make the eye closer to the viewer a bit bigger, to emphasize the perspective view of the eyes.

Next, we will create the mouth of our snowman by using the Pen Tool _ic-penic-pen. Tap once for the first mouth corner and then again and hold and drag to create the smiling curve for the mouth with the Bézier Handle.

We will finish the mouth by adding small circles on each corner by creating a circle with the Shape Tool _{ic-ovalic-oval}, duplicating it, and placing both elements accordingly.

Next, we will create a small triangular hat for the snowman using the Pen Tool _ic-penic-pen. Tap three times to draw the rectangular hat.

We then create the snowman's body by drawing a circle with the Shape Tool _{ic-ovalic-oval}. When you create the body shape, it will overlap the head shape.

You can let the head shape overlap the body shape or vice versa. To change the overlapping behavior of these two shapes, you need to rearrange the hierarchy of the drawn shapes in the layer hierarchy. You can use the Bring Forward _{ic-bring-forwardic-bring-forward} or Bring Backward _{ic-bring-backwardic-bring-backward} commands, which are accessible in the Arrange Menu _{ic-arrange-tabic-arrange-tab}.

Next, draw some zigzag details of the snowman's hat with the Pen Tool _ic-penic-pen. The lines don't need to match the underlying hat base shape perfectly; we will fix that later with a Boolean Operation _{ic-booleanic-boolean}. You can access the Boolean Operation _{ic-booleanic-boolean} controls via the Path Section _{ic-path-tabic-path-tab}.

To perform a Boolean Operation _{ic-booleanic-boolean} between the base shape of the hat and the zigzag detail, the paths of these shapes need to be closed. You can close a path using the Close Path Button _{ic-close-pathic-close-path} in the Path Section _{ic-path-tabic-path-tab}.

Select both the base hat shape and the zigzag detail, and perform the Boolean Operation Divide _{ic-boolean-divideic-boolean-divide}. This separates the intersecting parts of overlapping shapes into separate objects.

You can select multiple shapes by activating the Selection Tool _{ic-selectionic-selection} and then using the Multi Select Mode _{ic-multiselectic-multiselect}. Or tapping, holding, and dragging a selection square encompassing the elements you want to select simultaneously.

Next, we will add some detail to the body of the snowman.

Select the Shape Tool _{ic-ovalic-oval} and draw a circle holding one finger down simultaneously. Place the circle so that it intersects with the snowman's body.

Select the newly created circle and the circular body of the snowman and perform the Boolean Operation Divide _{ic-boolean-divideic-boolean-divide}. The pink shape now forms a half-moon shape contained within the outline of the snowman's body.

Draw little wood branches as arms of the snowman with the _ic-penic-pen Pen Tool.

Create the eye symbol

Jaye has included an eye symbol in the pattern. The eye symbol, for him, signals that Christmas is an important holiday that draws the attention of the masses.

First, draw a circle while simultaneously holding down one finger with the Shape Tool _{ic-ovalic-oval}. After that, draw the almond-shaped eye on it. Jaye used only four taps to create the shape. Tap once in every eye corner, then tap and drag to create the curve. Position the almond shape in the circle's center with the Selection Tool _{ic-selectionic-selection} on the canvas.

For the last element, the eye pupil, draw a circle with the Shape Tool _{ic-ovalic-oval} while simultaneously holding a finger down to create a circle.

Position the circular pupil in the center of the almond shape with the Selection Tool _{ic-selectionic-selection}.

Colorize the shapes

In the next step, we will add color to our Christmas shapes.

Jaye decided to spice up the traditional Christmas color palette of red, green, and gold by infusing the design with daring and bold neon colors.

We will color our shapes using the Fill _{ic-fillic-fill} and Stroke _{ic-stroke-widthic-stroke-width} sections. At the beginning of this tutorial, we provided a list of Hex Color Codes, allowing you to match each shape with the exact colors Jaye used.

Get this template

Get this template

Select the shape with the Selection Tool _{ic-selectionic-selection} and set the opacity of the Fill _{ic-fillic-fill} or Stroke _{ic-stroke-widthic-stroke-width} to 100% with the Opacity Slider _{ic-opacityic-opacity}. Toggle the Fill _{ic-fillic-fill} and Stroke _{ic-stroke-widthic-stroke-width} on and choose the color with the Color Picker _{ic-color-pickeric-color-picker} or set the Hex Color manually by copying the Hex Color Codes from the list at the beginning of the tutorial.

Another option is to pick the color directly from the color palette you prepared with the Hex Color Codes before starting the tutorial.

Draw the Christmas tree

In the next step of our tutorial, we'll draw one of the most traditional symbols of Christmas, the Christmas tree. Jaye has used exact and sharp lines for the Christmas tree. The tree shape is a triangle with sharp zigzag lines at the bottom.

We'll use the Pen Tool _ic-penic-pen to create the base shape. Select the Pen Tool _ic-penic-pen in the Toolbar and outline the tree shape. Set a node for every sharp turn of the path.

Now that we have fleshed out the basic tree shape let's create the details.

First, create the curved lines at the tip of the tree. With the Pen Tool _ic-penic-pen, draw three curves by tapping and holding to activate the Bézier Handles and then drag to curve the path with the Bézier Handles.

After drawing the curves, close the path by creating the triangular tip. Don't worry if you overdraw; we will fix the issue using a Boolean Operation _{ic-booleanic-boolean}.

Select the tree base shape and the curved tip shape and perform the Boolean Operation Divide _{ic-boolean-divideic-boolean-divide}.

Next, we will draw the star at the tip of the tree with the Pen Tool _ic-penic-pen. Tap four times to create the four tips of the star shape and hold and drag after each tap to soften the curve between nodes with the Bézier Curve Handle.

Keep the Pen Tool _ic-penic-pen selected, draw a zigzag line below the curved line with a triangular tip, and close the shape. Perform the Boolean Operation Divide _{ic-boolean-divideic-boolean-divide} so that the zigzag shape fits seamlessly into the basic tree shape.

The last detail we'll add to the Christmas tree will be its mouth and eyes.

With the Shape Tool _{ic-ovalic-oval}, create a circle for the eye, and duplicate it. Position the duplicated eye shape with the Selection Tool _{ic-selectionic-selection} on the tree. Select the Pen Tool _ic-penic-pen and tap for each mouth corner. When you tap the second time, hold and drag to create the mouth curve with the Bézier Handle.

Another option to create the mouth is to create a circle with the Shape Tool _{ic-ovalic-oval} and split the circle in half with the Scissors Tool_{ic-scissoric-scissor}. Select one of the split half-circles and toggle the Fill _{ic-fillic-fill} off so that the curved stroke of the half-circle is only visible.

Select the mouth shape and position it on the tree with the Selection Tool _{ic-selectionic-selection}. Reduce the stroke width in the Style Tab _{ic-style-tabic-style-tab}. Select the eye and mouth shapes and change the color in the Style Tab _{ic-style-tabic-style-tab}.

Draw the snowflake

To draw the snowflake, activate the Shape Tool _{ic-ovalic-oval} and select the Rectangle Shape _{ic-rectangleic-rectangle}. Hold a finger down to draw a square, then rotate the square with the Selection Tool _{ic-selectionic-selection} to display it as a rhombus.

We will use the Guides and Snapping to Guides features to draw the snowflake structure.

Choose the Horizontal and Vertical Guides _{ic-guidesic-guides} to draw the snowflake structure. Additionally, we will activate the Snapping to Guides _{ic-snap-guidesic-snap-guides} feature.

Tap on the Ruler _{ic-rulersic-rulers} and drag the Horizontal and Vertical Guides _{ic-guidesic-guides} (they are dragged out directly from the Ruler) to the tips of the rhombus. Select the Pen Tool _ic-penic-pen and draw a straight line outward from the rhombus tips. Duplicate the horizontal and vertical lines and position them on the opposing rhombus tip on the canvas.

After we have drawn the basic cross shape of the snowflake, we will draw the branches of the basic snowflake structure with the Pen Tool _ic-penic-pen.

Jaye added a few more elements to the pattern canvas, such as a small tulip flower, a star, a smaller snowflake, a blue-yellow gift box, and pink candy. He took these elements from a Christmas illustration he had previously created.

You can quickly draw these elements, as we have given you all the knowledge and tools to recreate the shapes in this tutorial. Alternatively, you can use only the elements we have drawn in this tutorial together for your repeating pattern.

Create the base tile

Now that we have drawn the pattern elements, we will arrange them on an Artboard_{ic-artboardic-artboard} to create the base tile or initial pattern card.

This Artboard _{ic-artboardic-artboard} will be the base tile of our repeating pattern. The tile can be repeated endlessly, creating a seamless pattern.

Tap the + button in the top right corner of the Layers Tab _{ic-layers-tabic-layers-tab} and then select New Artboard _{ic-add-artboardic-add-artboard}. As soon as you tap the button, a suggestion box will appear at the top center of the Canvas, which reads: Tap or draw anywhere to create an Artboard.

Set the dimension of the Artboard _{ic-artboardic-artboard} to 210 x 210 mm. If you accidentally created an Artboard _{ic-artboardic-artboard} with the wrong measurements, you can resize it.

Create the blue background by setting the Fill _{ic-fillic-fill} to background blue #099ED6 (RGB 9, 158, 214) and draw a square using the Rectangular Shape _{ic-rectangleic-rectangle}. Keep one finger on the canvas while drawing to create a square instead of a rectangle.

Open the Artboards _{ic-artboardic-artboard} that contain the pattern elements we created in the previous steps. In Curve, you can move elements between Artboards.

Group every pattern motif and drag it into the base tile Artboard _{ic-artboardic-artboard}. Arrange each element with the Selection Tool _{ic-selectionic-selection} or use the Alignment options _{ic-alignmentic-alignment} in the Arrange Menu _{ic-arrange-tabic-arrange-tab}.

Use the white space design technique to space the pattern motifs.

After all pattern motifs are arranged, select all elements and group them. Duplicate the grouped elements three times and arrange them in a bigger square of four tile elements.

Additionally, you can use the Alignment _{ic-alignmentic-alignment} options in the Arrange Section _{ic-arrange-tabic-arrange-tab} to align the tiles on the canvas.

Group_{ic-groupic-group} the four tiles into a singular tile. We have now created the base pattern card for our repeating pattern, which we will arrange in the next step of this tutorial.

Set up the repeating pattern

In the next step, we will create a new Artboard _{ic-artboardic-artboard} to arrange the base tile seamlessly.

Create a new Artboard _{ic-artboardic-artboard} with dimensions of 210 x 297 mm. Set the Fill _{ic-fillic-fill} to background blue #099ED6 (RGB 9, 158, 214) and draw a rectangle using the Rectangular Shape _{ic-rectangleic-rectangle} that fully covers the Artboard _{ic-artboardic-artboard}.

Create a new layer in the Layers Tab _{ic-layers-tabic-layers-tab}. Move the base tile group we created in Step 7 into the new Artboard _{ic-artboardic-artboard}.

Arrange the base tile in the top left corner of the Artboard _{ic-artboardic-artboard}. Copy the tile twice and place all three tiles in one horizontal row on the Artboard _{ic-artboardic-artboard}. Ensure that the design elements align, so that they'll be correctly displayed when tiled.

After arranging the top row, select and group the three base tiles. Duplicate _{ic-duplicate-2ic-duplicate-2} the Group _{ic-groupic-group} and place it below the first top row to create the second row.

Use the Alignment _{ic-alignmentic-alignment} options in the Arrange Tab _{ic-arrange-tabic-arrange-tab} to align the tiles on the canvas.

Again, ensure that the overlapping motifs create a seamless pattern within the first row. Continue until the Artboard _{ic-artboardic-artboard} is fully covered with tiles.

If some areas of the pattern elements overlap at the outer Artboard _{ic-artboardic-artboard} borders, choose Clip All in the Artboard export settings so that overlapping areas will not be included in the printed pattern.

You can export _{ic-exportic-export} your Artboard _{ic-artboardic-artboard} for print or print the document _{ic-printic-print} directly from Linearity Curve.

A few more tips

We hope you enjoyed this Linearity Curve tutorial on making visual patterns for practical applications. We sure enjoyed making it!

You can make any kind of pattern — basic patterns, classic patterns, antique patterns, block patterns, cute patterns — by applying the same steps in this guide. Turn your practice sheets into great products, packaging, merch, gifts, or digital wallpapers.

Let's look at a few more tips to make the most of your fabulous patterned creations:

1. Try to create a sense of balance in your design before turning it into a pattern. This will ensure that once it's tiled, it looks balanced, and you'll avoid awkward gaps.
2. That said, always work some white space into your design to lead the eye.
3. Design for the application. If you're making a pattern design that will be printed relatively small, it might be best to simplify your illustration and use a larger font (if applicable).
4. Remember to switch your design file's color profile to CMYK for printing.
5. Don't forget to ask for the printers' specs. Depending on how your pattern will be used, there will be different specs for the sizing and file types.
6. Try finding pattern inspiration and studying them. Whether you want to create something traditional or unique, you must educate yourself on the different kinds of patterns and how to use them.

Creating digital repeating patterns with Linearity Curve

All that's left is for you to download Linearity Curve (if you haven't already) to start designing!

You can also explore other great tutorials in the Linearity Curve Academy to keep practicing your illustration and vector art skills.

Don't let designer's block keep you from crafting intricate patterns. Our Template Gallery is here to help you out and keep you inspired. The best part? You can access it directly within the Linearity Curve app.

And when you're done creating your custom Christmas wrapping paper, feel free to post your finished designs or photos of your prints on our Community Gallery.