greggman · November 23, 2025 05:04
diff --git a/README.md b/README.md
diff --git a/index.css b/index.css
 #pattern {
  height: 100px;
 }
 #c {
  display: block;
  width: 100%;
  height: 100px;
 }
diff --git a/index.html b/index.html
 <div id="pattern"></div>
 <canvas id="c"></canvas>
diff --git a/index.js b/index.js
 const range = (n, fn) => new Array(n).fill(0).map((_, i) => fn(i));

 const elem = document.querySelector('#pattern');

 const ctx = document.querySelector('#c').getContext('2d');
 function render() {

  const numStops = ctx.canvas.width;
  elem.style.background = `linear-gradient(to right, ${
    range(numStops, i => `${i % 2 ? 'red' : 'white'} ${i / numStops * 100}%`).join(',')
  })`;

  for (let x = 0; x < ctx.canvas.width; ++x) {
    ctx.fillStyle = x % 2 ? 'red' : 'white';
    ctx.fillRect(x, 0, 1, ctx.canvas.height);
  }
 }

 const observer = new ResizeObserver(entries => {
  const e = entries[0];
  e.target.width = e.contentBoxSize[0].inlineSize;
  e.target.height = e.contentBoxSize[0].blockSize;
  render();
 });
 observer.observe(ctx.canvas);
diff --git a/jsGist.json b/jsGist.json
 {"name":"Pattern uses ramp 256","settings":{},"filenames":["index.html","index.css","index.js"]}
	const range = (n, fn) => new Array(n).fill(0).map((_, i) => fn(i));

	const elem = document.querySelector('#pattern');

	const ctx = document.querySelector('#c').getContext('2d');
	function render() {

	const numStops = ctx.canvas.width;
	elem.style.background = `linear-gradient(to right, ${
	range(numStops, i => `${i % 2 ? 'red' : 'white'} ${i / numStops * 100}%`).join(',')
	})`;

	for (let x = 0; x < ctx.canvas.width; ++x) {
	ctx.fillStyle = x % 2 ? 'red' : 'white';
	ctx.fillRect(x, 0, 1, ctx.canvas.height);
	}
	}

	const observer = new ResizeObserver(entries => {
	const e = entries[0];
	e.target.width = e.contentBoxSize[0].inlineSize;
	e.target.height = e.contentBoxSize[0].blockSize;
	render();
	});
	observer.observe(ctx.canvas);
No results found