I want to create a grid pattern whose angle between two lines can be controlled. When the user drags the slider, the two lines rotate symmetrically at the same time, thus allowing the grid to change as shown in the animation.
I currently try to do this by overlapping two rectangles filled with two line pattern, so that it looks like a grid pattern. Then I can use two sliders to control each of these two straight lines.
My questions are:
- I want to use one slider to control the two lines rotate symmetrically as shown in the animation. How can I achieve this?
- I would prefer to be able to achieve this with just one
<pattern>rather than two, so that I only need one rectangle instead of using two rectangles overlapped together. Is this possible?
My current code:
var controlRotate = document.getElementById("controlRotate");
var controlRotate1 = document.getElementById("controlRotate1")
var pattern0 = document.getElementById("pattern0")
var pattern1 = document.getElementById("pattern1")
var path0 = document.getElementById("path0")
var path1 = document.getElementById("path1")
controlRotate.oninput = function(){
pattern0.setAttribute("patternTransform", "rotate("+controlRotate.value+")")
}
controlRotate1.oninput = function(){
pattern1.setAttribute("patternTransform", "rotate("+controlRotate1.value+")")
} <script src="https://d3js.org/d3.v4.min.js"></script>
<svg>
<defs>
<pattern id="pattern0"
x="0" y="0" width="20" height="20"
patternUnits="userSpaceOnUse" patternTransform="rotate(45)" >
<path id = "path0" d="m -100 10 l 200 0" strokeWidth = "1" stroke = "black"></path>
</pattern>
<pattern id="pattern1"
x="0" y="0" width="20" height="20"
patternUnits="userSpaceOnUse" patternTransform="rotate(135)" >
<path id = "path1" d="m -100 10 l 200 0" strokeWidth = "1" stroke = "black"></path>
</pattern>
</defs>
<rect x="0" y="0" width="100" height="100" style="stroke: #000000; fill: url(#pattern0);" />
<rect x="0" y="0" width="100" height="100" style="stroke: #000000; fill: url(#pattern1);" />
</svg>
<!-- rotation controller-->
<div style='margin-bottom:25px'>
<p style=font-size:15px>Rotation</p>
<input type="range" min="0" max="360" value="0" class="slider" id="controlRotate" style='margin-top: -10px;'>
</div>
<div style='margin-bottom:25px'>
<p style=font-size:15px>Rotation1</p>
<input type="range" min="0" max="360" value="0" class="slider" id="controlRotate1" style='margin-top: -10px;'>
</div>Thank you in advance.