Generative backgrounds for eleventy

backgrounds.json

[
  {
    "name": "purple-pink",
    "seed": 12,
    "color1": "rebeccapurple",
    "color2": "deeppink"
  },
  {
    "name": "grayish",
    "seed": 432,
    "color1": "#111",
    "color2": "#777"
  }
]

backgrounds.njk

---
pagination:
  data: backgrounds
  size: 1
  alias: background
permalink: backgrounds/{{ background.name }}.svg
---
{%- set W = 300 -%}
{%- set H = 300 -%}
{%- set CURVES = 4 -%}
{%- set POINTS = 6 -%}
{%- set seed = background.seed | int -%}
<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 {{ W }} {{ H }}"
  preserveAspectRatio="none">
  <rect width="{{ W }}" height="{{ H }}" fill="{{ background.color1 }}"/>
  {%- for curve in range(0, CURVES) -%}
    {%- set path = "M0 " + H/2 + "S" -%}
    {%- for pointIndex in range(0, POINTS) -%}
      {%- set seed = seed * 16807 % 2147483647 -%}
      {%- set rand = seed / 2147483647 -%}
      {%- set X = (pointIndex + 0.5) * W / (POINTS - 1) -%}
      {%- set Y = (H * (0.5 + 0.3 * rand)) | round -%}
      {%- set path = path + X + " " + Y + " " -%}
    {%- endfor -%}
    {%- set path = path + "V" + H + " H0Z" -%}
    <path d="{{ path }}" fill="{{ background.color2 }}" fill-opacity="{{ 1 / CURVES }}"/>
  {%- endfor -%}
</svg>