Nautilus Spiral

nautilus-spiral.markdown

Nautilus Spiral

A Pen by Menglin Chen on CodePen.

License.

script.js

const width = window.innerWidth
const height = window.innerHeight
const NS = "http://www.w3.org/2000/svg"
const svg = document.createElementNS(NS, "svg")
const size = Math.min(width, height) * 0.75
svg.setAttribute("viewBox", `0 0 ${size} ${size}`)
svg.setAttribute("width", `${size}px`)
svg.setAttribute("height", `${size}px`)
svg.setAttribute("xmlns", NS)
document.body.appendChild(svg)
const center = [
  size * 0.55,
  size * 0.45
]
const spiral = document.createElementNS(NS, 'path')
const points = {}
let max = 0
let d = `M ${center[0]}, ${center[1]}`
for(let i = 1; i < ~~(size * 0.5); i+=1) {
  const portion = (i / size)
  const r = 10 * Math.PI * portion
  const sample = Math.round(10 * portion * 15)
  const pt = [
    center[0] + ((r * 2) ** 1.6) * Math.cos(r),
    center[1] + ((r * 2) ** 1.6) * Math.sin(r)
  ]
  if(!(sample in points)) {
      if(sample > max) {
          max = sample
      }
      points[sample] = pt
  }
  d += `L ${pt[0]}, ${pt[1]}`
}
const freq = ~~(max / 3)
for(let i = 1; i < max; i++) {
    if((i + freq + 1) > max) {
        break
    }
    const pt1 = points[i]
    const pt2 = points[i + freq + 1]
    const arc = document.createElementNS(NS,'path')
    const r = (((pt1[0] - pt2[0]) ** 2 + (pt1[1] - pt2[1]) ** 2) ** 0.5) * 1.2
    arc.setAttribute('d', `M ${pt1[0]},${pt1[1]} A ${r} ${r} 0 0 1 ${pt2[0]},${pt2[1]}`)
    arc.setAttribute('stroke', 'black')
    arc.setAttribute('fill', 'none')
    svg.appendChild(arc)
}

spiral.setAttribute('d', d)
spiral.setAttribute('fill', 'none')
spiral.setAttribute('stroke', 'black')
svg.appendChild(spiral)

style.css

body {
  margin: 0;
  overflow: hidden;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  --h: 175;
  background: linear-gradient(to bottom right, hsl(var(--h), 45%, 90%), hsl(var(--h), 45%, 70%));
  height: 100vh;
}

svg {
  border: 2.25rem solid #343434;
  border-radius: 0.25rem;
  padding: 2rem;
  box-shadow: 0.125rem 0.25rem 1.5rem 0.25rem rgba(0,0,0,0.45), 
              0.125rem 0.125rem 1rem 0.25rem rgba(0,0,0,0.35) inset,
    0 0 0 2.75rem hsla(60, 100%, 97%, 1) inset,
    0.1rem 0.1rem 0.5rem 2.75rem hsla(0, 0%, 10%, 0.4) inset;
  stroke-linecap: round;
  stroke-linejoin: round;
  background: white;
}