波の様なページ背景

/**
 * 波移動のSVG画像出力
 *
 * @author ao-system, Inc.
 * @date 2024-02-03
 */

export class LineImage {
	'use strict';
	#transform = 24;
	#points = Array.from({length:4}, () => Math.random() * (this.#transform * 2) - this.#transform);
	#offsets = Array.from({length:4}, () => 0.2 + Math.random() * 0.2);	//speed
	#place;
	#color = ['rgba(255,255,200,0.5)','rgba(255,220,100,1)'];
	#filter = 'blur(5px) drop-shadow(0 10px 5px rgba(255,255,0,0.9))';
	#linearGradient;
	#polygon;
	constructor(param) {
		if (param.place) {
			this.#place = param.place;
		}
		if (param.color) {
			this.#color = param.color;
		}
		if (param.filter) {
			this.#filter = param.filter;
		}
		this.#init();
	}
	set place(val) {
		if (this.#place instanceof Element) {
			this.#place.innerHTML = '';
		}
		this.#place = val;
		this.#createSvg();
	}
	set color(val) {
		if (this.#place instanceof Element) {
			this.#place.innerHTML = '';
		}
		this.#color = val;
		this.#createSvg();
	}
	set filter(val) {
		if (this.#place instanceof Element) {
			this.#place.innerHTML = '';
		}
		this.#filter = val;
		this.#createSvg();
	}
	#init() {
		this.#createSvg();
		this.#animateSvg();
	}
	//<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="50px" viewBox="0 0 200 50" preserveAspectRatio="none">
	//<linearGradient id="lg" gradientUnits="userSpaceOnUse" x1="0" y1="25" x2="200" y2="25">
	//	<stop offset="0" style="stop-color:#fff"/>
	//	<stop offset="1" style="stop-color:#aaa"/>
	//</linearGradient>
	//<polygon fill="url(#rg)" points="0,0 200,0 200,50 0,50"/>
	//</svg>
	#createSvg() {
		const linearGradientId = this.#generateRandomId();
		const svgElm = document.createElementNS('http://www.w3.org/2000/svg','svg');
		svgElm.setAttribute('xmlns','http://www.w3.org/2000/svg');
		svgElm.setAttribute('viewBox','0 0 200 50');
		svgElm.setAttribute('preserveAspectRatio','none');
		svgElm.style.filter = this.#filter;
		this.#linearGradient = document.createElementNS('http://www.w3.org/2000/svg','linearGradient');
		this.#linearGradient.setAttribute('id',linearGradientId);
		this.#linearGradient.setAttribute('gradientUnits','userSpaceOnUse');
		this.#linearGradient.setAttribute('x1',0);
		this.#linearGradient.setAttribute('y1',0);
		this.#linearGradient.setAttribute('x2',0);
		this.#linearGradient.setAttribute('y2',50);
		const stop1 = document.createElementNS('http://www.w3.org/2000/svg','stop');
		stop1.setAttribute('offset',0);
		stop1.setAttribute('style','stop-color:' + this.#color[0]);
		const stop2 = document.createElementNS('http://www.w3.org/2000/svg','stop');
		stop2.setAttribute('offset',1);
		stop2.setAttribute('style','stop-color:' + this.#color[1]);
		this.#polygon = document.createElementNS('http://www.w3.org/2000/svg','polygon');
		this.#polygon.setAttribute('fill','url(#' + linearGradientId + ')');
		this.#polygon.setAttribute('x',0);
		this.#polygon.setAttribute('width',0);
		this.#polygon.setAttribute('height',50);
		this.#linearGradient.appendChild(stop1);
		this.#linearGradient.appendChild(stop2);
		svgElm.appendChild(this.#linearGradient);
		svgElm.appendChild(this.#polygon);
		this.#place?.appendChild(svgElm);
	}
	#generateRandomId(idLength = 12) {
		const characters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
		return Array.from({length:idLength}, () => characters[Math.floor(Math.random() * characters.length)]).join('');
	}
	#animateSvg() {
		for (let i = 0; i < this.#points.length; i++) {
			this.#points[i] += this.#offsets[i];
			if (this.#points[i] > this.#transform || this.#points[i] < -this.#transform) {
				this.#offsets[i] *= -1;
			}
		}
		const points = [
			`0,${25 + this.#points[0]}`,
			` 200,${25 + this.#points[1]}`,
			` 200,${25 + this.#points[2]}`,
			` 0,${25 + this.#points[3]}`,
		].join('');
		this.#polygon.setAttribute('points',points);
		requestAnimationFrame(() => this.#animateSvg());
	}
}