Generate a special period image Construct a program or function that takes input in form of
&lt;width&gt;, &lt;height&gt;, &lt;color1&gt;, &lt;color2&gt;

and generates an output such that first row alternates between pixels of color  &lt;color1&gt; and &lt;color2&gt; with a period of &lt;height&gt;. For each row that follows, the period shall be &lt;height&gt; - &lt;row number&gt;. Note that &lt;color1&gt; always begins the row.
Sample Output
Input 120, 6, #000000, #FFFF00:

Input 80, 50, #000000, #FFFF00:

(Sample output has been scaled for clarity)
This is code-golf, so the shortest valid entry in bytes wins.
JavaScript (ES6), 177 bytes



g=
(w,h,f,b)=&gt;`&lt;svg${s=` width=${w} height=`+h}&gt;&lt;rect${s} fill=${b} /&gt;`+[...Array(h)].map((_,i)=&gt;`&lt;line stroke=${f} stroke-dasharray=${h-i} x1=0 y1=${i} x2=${w} y2=${i} /&gt;`).join``
Width: &lt;input id=w value=80 type=number min=1&gt;&lt;br&gt;Height: &lt;input id=h value=50 type=number min=1&gt;&lt;br&gt;Foreground: &lt;input id=f value=#000000&gt;&lt;br&gt;Background: &lt;input id=b value=#FFFF00&gt;&lt;br&gt;&lt;input type=button value=Go! onclick=o.innerHTML=g(+w.value,+h.value,f.value,b.value)&gt;&lt;div id=o&gt;




Outputs an HTML5-compatibile SVG image.