How to make color patterns in css? : <p><a href="https://i.stack.imgur.com/PLG18.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PLG18.png" alt="enter image description here"></a></p>

<p>To achieve this design I created a div of certain size.
In above image background color of the div is red and green is used as smoke on top of it in some pattern.
How can I create such patterns ?
What are different ways to achieve this in CSS ?</p>

<pre><code>&lt;div id="canvas" style="background-color:red;"&gt;

&lt;/div&gt;
</code></pre>

<p>This is all I could do. I created a similar color pattern (the pattern of green) on photoshop. Placed it on this div then tried to change the color of that pattern. But it didnot reflect any changes.</p>
