Moiré Patterns

Moiré Patterns are patterns that results from overlapping two periodical patterns (series of straight lines, for instance). This demo allows to create Moiré patterns by changing the relative angle between the patterns, the number of bars, the bar width and the color of the bars.

Moiré Patterns

This demo uses D3 to create the patterns with SVG rectangles.

References

<html>
<head>
    <title>The Moiré Patterns</title>

.bar {
            stroke: none;
            stroke-width: 0;
        }
    </style>

</head>

<h1>Moiré Pattern</h1>

Moiré Patterns are patterns that results from overlapping two periodical patterns (series of straight lines, for instance). This demo allows to create Moiré patterns by changing the relative angle between the patterns, the number of bars, the bar width and the color of the bars.

<label for="input-ta">Angle</label>
                <input id="input-ta" type="number" min="-90" max="90" step="0.1" value="0">

<label for="input-pa">Padding</label>
                <input id="input-pa" type="number" min="0.05" max="0.95" step="0.05" value="0.5">

<label for="input-ca">Color</label>
                <input id="input-ca" type="color" value="#FF6B6B">
            </div>

<label for="input-tb">Angle</label>
                <input id="input-tb" type="number" min="-90" max="90" step="0.1" value="0">

<label for="input-pb">Padding</label>
                <input id="input-pb" type="number" min="0.05" max="0.95" step="0.05" value="0.5">

<label for="input-cb">Color</label>
                <input id="input-cb" type="color" value="#4ECDC4">
            </div>

</form>

</div>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.4/d3.min.js