Tile the plane with squashed hexagons I came across an interesting tiling of the plane using squashed hexagons in a popular math book. All the six edges of the squashed hexagon are the same length. Two opposite corners are right angles and the rest four corners are 135 degrees each. This shape allows four squashed hexagons be arranged so that they meet at a point. Then “concentric rings” of squashed hexagons can outline the resulting cross indefinitely.




Write a full program or a function that accepts an integer 0 &lt; n &lt; 10 and renders n rings of this tessellation. You can rotate the image by 45 dergrees if it's more convenient for your algorithm. You can render directly to the screen, or save the result to a file. In either case, please provide an image demonstrating the the result of your code. You can crop the resulting image so that it contains only the hexagons. 

Examples:

n = 1



n = 2



n = 3



n = 4



The shortest code in bytes in each language wins.
JavaScript (ES6), 319 313 bytes



f=
n=&gt;{s=`&lt;svg viewBox=${n*=-12},${n},${n*=-2},${n}&gt;&lt;use href=#d transform=rotate(180) /&gt;&lt;g id=d&gt;&lt;use href=#s transform=rotate(90) /&gt;&lt;path id=s fill=none stroke=#000 d=`
for(n/=24;n--;)for(j=0;j&lt;=n;j++)s+=`M${n*5+j*7},${n*12-j*7}h7l5,5v7h-7l-5,-5z`+(j&lt;n?`M${n*12},${n*5-j*10}h7l5,-5l-5,-5h-7l-5,5z`:``)
return s+`&gt;`}
&lt;input type=number min=1 oninput=o.innerHTML=f(this.value)&gt;&lt;div id=o&gt;




Output is an HTML5 SVG, which the snippet inserts into a DOM node so that you can see it. Output is rotated by 45° as allowed by the question. Edit: Saved 3 bytes thanks to @KevinCruijssen.