Make an svg vector halftone background

I’ll teach you how to use Inkscape SVG to make a vector halftone background using tiled clones and mesh gradient. Watch the halftone tutorial video instead.

Svg vector halftone background

Inkscape is free design software that can save as SVG files and export PNG files. That is certainly easy to do! Just go to File-save as-SVG name the file and location. To export a PNG just go to File-export png. I have a simple tutorial here 🙂

Svg vector halftone background: Shapes and mesh gradient

Begin by creating a small circle. Do this easily by selecting the circle tool on the right and also pressing shift +ctrl to drag a perfect circle.

Additionally create a rectangle that is 600 x 900 px. 

Next we need to add a gradient mesh to the rectangle. Select the rectangle and also go to the fill and stroke panel. Choose mesh gradient and leave default settings.

Align the circle to the top and right of the rectangle. Use the Align tab.

svg vector halftone background: Create tiled clones

Select the circle. Go to Clone-create tiled clones.

Loading Preview…
Powered by Creative Market
Loading Preview…
Powered by Creative Market
Loading Preview…
Powered by Creative Market
Svg vector halftone background inkscape tutorial

In the create tiled clones menu go to the trace tab. Click the top box that says trace the drawing under the clones. Choose 600 x 900 px for the size. Click Create.

Learn Inkscape today!

While there are some tutorials in this beginner’s course, It is not the main objective. The lessons allow learners to understand the tools and why they are used.

Svg vector halftone background inkscape tutorial

svg vector halftone background: colour the mesh gradient


Select all the black circles without selecting the background. Do this quickly by selecting one black circle, then also go to Edit-select same-fill colour. Finally, with all black circles selected go to path-union. This might slow your computer for a brief minute. 

Next select the black/white gradient background. Let’s make it yellow and red. Select the gradient mesh tool on the right. It looks like a square with nodes and is located under the eyedropper. Select the top left node of the rectangle and the bottom right node and turn them yellow. Select the opposite side nodes and turn them red. Even though we only give 2 colours, it looks like there is orange in there too. Neat, huh?

Fit clones to background

As you see the black circles overlap the orange gradient. Let’s do an intersection to make it the same size as the background.

Select the orange gradient background. Right click and duplicate it. Turn it green. Select the green object and select the black object. Finally go to path-intersection.

Now the black circles are the right fit. 

Svg vector halftone background inkscape tutorial

Finally to complete the look, simply colour the black circles red. Ideally the same colour used in the gradient. As a result it should fade from corner to corner. The smaller dots being in the yellow area and the large red dots in the red area help exaggerate the fade with the halftone.

That’s it! you’re done 🙂

View more Inkscape tutorials here.


Are you interested in learning the Inkscape program from the beginning? Join the beginner Inkscape course here. I will explain the tools, as well as why and how to use them.

Svg vector halftone background Inkscape tutorial