Fig. 1. Inspirited by this

Fig. 2. Based on naive semi-Fourier smooth semi-Perlin noise (click on it to update)

Basically, we calculate Fig. 1. as
ang = cos((x, y)*(1, 0)+(x, y)*(0, 1))
in terms of dot product or scalar product
I.e. it bases on two unit vectors.

Fig. 2. bases on similar approach, however
it uses six random vectors and six terms in sum.

Fig. 3, 4, 5. The same as 2 with different combinations

Further reading

• Perlin noise impl in p5.js
• Stefan Gustavson: Simplex noise (3D and higher were covered by U.S. Patent 6,867,776)

Fig 6. Check completely different approach: pivot points and acceleration