[Question]
  [
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.
[![Initial cross](https://i.stack.imgur.com/vve8c.jpg)](https://i.stack.imgur.com/vve8c.jpg)
[![3 rings](https://i.stack.imgur.com/RmR84.jpg)](https://i.stack.imgur.com/RmR84.jpg)
Write a full program or a function that accepts an integer 0 < `n` < 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=1](https://i.stack.imgur.com/vve8c.jpg)](https://i.stack.imgur.com/vve8c.jpg)
n = 2
[![n=2](https://i.stack.imgur.com/vXHrt.jpg)](https://i.stack.imgur.com/vXHrt.jpg)
n = 3
[![n=3](https://i.stack.imgur.com/RmR84.jpg)](https://i.stack.imgur.com/RmR84.jpg)
n = 4
[![4 rings](https://i.stack.imgur.com/gu6I8.jpg)](https://i.stack.imgur.com/gu6I8.jpg)
The shortest code in bytes in each language wins.
  
[Answer]
## JavaScript (ES6), ~~319~~ 313 bytes
```
f=
n=>{s=`<svg viewBox=${n*=-12},${n},${n*=-2},${n}><use href=#d transform=rotate(180) /><g id=d><use href=#s transform=rotate(90) /><path id=s fill=none stroke=#000 d=`
for(n/=24;n--;)for(j=0;j<=n;j++)s+=`M${n*5+j*7},${n*12-j*7}h7l5,5v7h-7l-5,-5z`+(j<n?`M${n*12},${n*5-j*10}h7l5,-5l-5,-5h-7l-5,5z`:``)
return s+`>`}
```
```
<input type=number min=1 oninput=o.innerHTML=f(this.value)><div id=o>
```
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.
[Answer]
# [GFA Basic 3.51](https://en.wikipedia.org/wiki/GFA_BASIC) (Atari ST), ~~187 181 174~~ 171 bytes
A manually edited listing in .LST format. All lines end with `CR`, including the last one.
```
PRO f(n)
DR "MA166,94"
t$="FD8LT45PD"
h$=t$+"FD8LT90"+t$+t$+"FD8LT90FD8BK8LT90FD8RT45"
a$=""
F i=1TO n
DR STRING$(4,a$+h$+"LT45BK8"+a$+t$)+"PUFD8RT45"+t$
a$=a$+h$
N i
RET
```
### Expanded and commented
```
**PROCEDURE f(n)**
  ' move the pen at (166,94)
  **DRAW "MA166,94"**
  ' t$ = move forward by 8, left turn of 45 degrees, pen down
  **t$="FD8LT45PD"**
  ' h$ holds the directives to draw a single hexagon
  ' and get ready to draw a contiguous hexagon
  **h$=t$+"FD8LT90"+t$+t$+"FD8LT90FD8BK8LT90FD8RT45"**
  ' a$ is used to store a concatenation of hexagons
  **a$=""**
  ' draw n rings
  **FOR i=1 TO n**
    ' draw a full ring and move to the next ring
    **DRAW STRING$(4,a$+h$+"LT45BK8"+a$+t$)+"PUFD8RT45"+t$**
    ' append a new hexagon to a$
    **a$=a$+h$**
  **NEXT i**
**RETURN**
```
### Example output
[![enter image description here](https://i.stack.imgur.com/Rzi70.png)](https://i.stack.imgur.com/Rzi70.png)
[Answer]
## Logo, ~~276~~ 245 bytes
```
to i:n
repeat 2[repeat:n[repeat 2[fd 7
rt 45]fd 7
bk 7
lt 90]rt 90
fd 7
rt 90]end
to j:n
make"m:n
repeat:n[i:m
make"m:m-1
rt 90
repeat 2[fd 7
lt 45]]repeat:n[repeat 2[rt 45
bk 7]lt 90]end
to k:n
repeat 4[j:n
rt 90
fd 7
lt 45
j:n-1
rt 45
bk 7]end
```
Use `k <n>` to invoke. Output is rotated by 45° as allowed by the question. Example for `n=10`: [Try it online!](http://logo.twentygototen.org/x6AIFvYp)
[Answer]
# [Python 3](https://docs.python.org/3/), ~~361~~ 342 bytes
```
from turtle import*
def t(a):r(a);fd(9)
def k(i):Q.add((o+i,pos(),heading(),m))
u=45;n=int(input());Q=set((1,(0,0),a*90,a>3)for a in range(8));ht()
while Q:
 o,p,a,m=Q.pop()
 if round(o)>n:continue
 r=(rt,lt)[m];g=not o%1;up();goto(*p);seth(a);pd();t(-u)
 if g:k(1.1)
 t(u)
 if g:k(1)
 t(u);t(-u);k(2+g/3);undo();undo();t(90);t(u);t(u)
done()
```
[![program output for n=10](https://i.stack.imgur.com/rTPV9.png)](https://i.stack.imgur.com/rTPV9.png)
[Answer]
## Shadertoy (GLSL), ~~777 710 679 644 630~~ 609 bytes
```
#define V vec2
#define F float
#define R return
const int n=10;const F Z=2.2/F(n),W=.01*Z,L=.07*Z,K=L/2.,M=K*1.414;F h(V u,V c){u=abs(u-c);
if(u.x>.0&&u.x<K)R abs(u.y-M)<W/1.4?.0:1.;else if(u.x<K+M+W)R abs(u.y-M+u.x-K)<W?.0:1.;R 1.;}
F m(V u,V c){u=abs(u);R h(u,c)*h(u.yx,c);}void mainImage(out vec4 f,in V c){V S=iResolution.xy;V v=c/S-V(.5);
v.y/=S.x/S.y;F b=-atan(1.);mat2 o=mat2(cos(b),-sin(b),sin(b),cos(b));V w=o*v;F s=1.,a=K+M,k=.0,l;int i,j,J;
for(i=0;i<n;i++,k++){J=i/2+1;l=.0;for(j=0;j<J;j++,l++){F z=l*2.*M;if(i%2==1)z+=M;
s*=m(v,V(a+k*(L+M),z));if(i<n-1)s*=m(w,V(a+k*(L+M)+L,z));}}f.xyz=vec3(s);}
```
[Shadertoy link](https://www.shadertoy.com/view/tsBfRW)
Happy to finally see this working, the tile layout can be a bit puzzling at first. It automatically "zooms in" for lower n values, but can also be manually adjusted by changing the `Z` variable because it's not optimal. Something is a bit wrong with the line drawing where diagonal and straight lines meet (which gets more apparent for lower `n` values), perhaps I'll find a way to get that fixed. There also is an [ungolfed version](https://www.shadertoy.com/view/3sSBRW) with some comments on how it does things.
Output for `n` = 10:
[![enter image description here](https://i.stack.imgur.com/95ipY.png)](https://i.stack.imgur.com/95ipY.png)
[Answer]
# JavaScript + HTML + CSS, 82 + 39 + 204 = 325 bytes
### JavaScript
Function that takes a number `n`. An internal function `P` recursively generates an ASCII pyramid of `⬡` characters, formatted as a CSS string with `\a` line breaks. On the HTML element with `id="X"`, sets the custom CSS custom properties `--` and `---` to `P(n)` and `P(n-1)`, respectively.
```
n=>X.style=`--:"${(P=n=>(n?P(n-1)+`\\a`:'')+'⬡'.repeat(n))(n-1)}";---:"${P(n)}"`
```
### HTML
8 nested HTML elements whose `:after` pseudo-elements will contain hexagon pyramids; wrapped in a `<pre>` to show line breaks. `<center>` ensures pyramids are centered horizontally.
```
<pre><center id=X><i><b><i><b><i><b><i>
```
### CSS
Applies `transform: rotate(45deg)` to all elements; the rotation effect compounds for the 8 nested elements. Applies `content` such that `i:after` gets the bigger pyramid `---`, and `center:after` and `b:after` get the smaller pyramid `--`. Squishes the ASCII hexagon pyramids into a (decently accurate) tile pattern via `font-size`, `line-height`, `letter-spacing`, and `transform` – results may vary depending on your browser.
```
*{display:flex;place-content:center;transform:rotate(45deg)}:after{font:150%/.62 auto;letter-spacing:-5px;position:absolute;transform:matrix(.69,0,0,1,-1.75,-5);content:var(--)}i:after{top:-8px;--:var(---
```
---
Output for `n` = 10 (Chromium 81, macOS):
[![Tile the plane with squashed hexagons - JavaScript + HTML + CSS, 82 + 39 + 204 = 325 bytes](https://i.stack.imgur.com/we5wA.png)](https://i.stack.imgur.com/we5wA.png)
---
## Try it!
```
f=
n=>X.style=`--:"${(P=n=>(n?P(n-1)+`\\a`:'')+'⬡'.repeat(n))(n-1)}";---:"${P(n)}"`
f(+prompt())
```
```
head,script{display:none !important}
body{margin:50vmin}
*{display:flex;place-content:center;transform:rotate(45deg)}:after{font:150%/.62 auto;letter-spacing:-.23em;position:absolute;transform:matrix(.71,0,0,1,-1.75,-5);content:var(--)}i:after{top:-.34em;--:var(---
```
```
<pre><center id=X><i><b><i><b><i><b><i>
```
]