Tile the plane with squashed hexagons
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.