Moiré pattern

Moiré pattern is a geometrical design which is produced when a set of lines or pattern is overlaid onto an another set.

Below is an interactive canvas that shows four instances of concentric circles overlaid onto each other. Alongside, there is a list of properties that determine how all the circles are rendered when their values are changed.

Try changing the values and hover over the canvas. Moving the cursor on the canvas either in horizontal or vertical direction will produce a different image.

For a better experience, while interacting with the canvas, hold the touch, and then move it around anywhere in the bounds of the canvas. This will ensure that the other elements on the page are locked when an interaction occurs on the canvas.

  • 255


The canvas renders the image using these three properties:

  • Stroke offset - It determines the stroke value of each circle.

  • Circle size - This property sets the radii for circle in each instance of concentric circle.

  • Stroke weight offset - It determines the stroke weight for each circle.