Form meets code

Moiré pattern

Moiré pattern is a geometrical design which is produced when a set of lines or pattern is overlaid onto 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
  • Stroke offset - Determines the stroke value of each circle.
  • Circle size - Sets the size of each instance of the concentric circle.
  • Stroke weight offset - Determines the stroke weight of each circle.