I would like to enhance the square lines that form the fence with some color.
Currently, the lines of the fence are colorless, and I wish to change that by adding color to them.
Could you please advise me on how to achieve this in the code?
That is the only modification I am making in the code.
Any suggestions on how this can be accomplished?
Code: https://jsfiddle.net/bx3qse0z/
svg code:
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><path fill="none" d="M0 0h10v10H0z"/><path d="M10 .15L5.15 5 10 9.85V10h-.13L5.01 5.14.15 10H0v-.14L4.87 5 0 .13V0h.15l4.86 4.86L9.86 0H10z"/></svg>');
}
https://i.sstatic.net/OKOn4.png
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
--color-a: blue;
--color-b: black;
--color-c: red;
--color-d: black;
background-size: 165px 165px;
background-image:
linear-gradient(var(--color-a) 5px, #0000 5px),
linear-gradient(90deg, var(--color-a) 5px, #0000 5px),
linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
...
<div class="outer">
<div class="curtain ">
<div class="ratio-keeper">
</div>
</div>
</div>