Halftone with custom shape or typography

please format code with </> button * homework policy * asking questions

Does anyone know how to create half tone images with custom shapes or an imported shape?
Also want to achieve this effect with typography, the image will dictate the size of the shapes to create an half tone.

Similar to the attached image:


Hi @eddg101,

Welcome to the forum! :wink:

Do you already know how to replicate a Halftone effect with simple shapes like dots, circles or squares?

If not here is a way to do it:

  • Go through each pixel in the image (with a bigger step so shapes won’t overlap)
  • Get the current pixel brightness value
  • Display a shape at that point in space with varying thickness / size or fill depending on the brightness (play with a threshold)

Then using a custom shape is simple, you can display it in the third step or load a SVG from a file and input any shape you want (with responsive size).

Hey Joseph, Yes I can create a half tone pattern using solids, circles squares diamonds etc.

Thanks for your feedback ill give this a go.


1 Like