ガラスの様なページ背景

/**
 * ガラスの様なSVG画像出力
 *
 * @author ao-system, Inc.
 * @date 2024-02-03
 */

export class GlassImage {
	'use strict';
	#transform = 24;
	#points = Array.from({length:48}, () => Math.random() * (this.#transform * 2) - this.#transform);
	#offsets = Array.from({length:48}, () => 0.2 + Math.random() * 0.2);	//speed
	#scaleDirection = 0;	//0:なし -1:小さくなる 1:大きくなる
	#scale = 1;
	#place;
	#color = ['rgba(250,255,255,0.2)','rgba(100,150,200,1)'];
	#filter = 'blur(5px) drop-shadow(0 0 20px #ff0)';
	#svgElm;
	#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="200px" viewBox="0 0 200 200">
	//	<radialGradient id="rg" cx="100" cy="100" r="50%" gradientUnits="userSpaceOnUse">
	//		<stop offset="0" style="stop-color:#7f6"/>
	//		<stop offset="1" style="stop-color:#ff9"/>
	//	</radialGradient>
	//	<polygon fill="url(#rg)" points="117,95 165,63 113,87 138,35 105,83 100,25 95,83 63,35 87,87 35,63 83,95 25,100 83,105 35,138 87,113 63,165 95,117 100,175 105,117 138,165 113,113 165,138 117,105 175,100"/>
	//</svg>
	#createSvg() {
		const radialGradientId = this.#generateRandomId();
		this.#svgElm = document.createElementNS('http://www.w3.org/2000/svg','svg');
		this.#svgElm.setAttribute('xmlns','http://www.w3.org/2000/svg');
		//this.#svgElm.setAttribute('width','200px');
		//this.#svgElm.setAttribute('height','200px');
		this.#svgElm.setAttribute('viewBox','0 0 200 200');
		this.#svgElm.style.filter = this.#filter;
		this.#svgElm.addEventListener('mouseover', () => {
			if (this.#scaleDirection == 0) {
				this.#scaleDirection = -1;
			}
		});
		this.#svgElm.style.transform = 'scale(' + this.#scale + ')';
		const radialGradient = document.createElementNS('http://www.w3.org/2000/svg','radialGradient');
		radialGradient.setAttribute('id',radialGradientId);
		radialGradient.setAttribute('cx',100);
		radialGradient.setAttribute('cy',100);
		radialGradient.setAttribute('r','40%');
		radialGradient.setAttribute('gradientUnits','userSpaceOnUse');
		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(#' + radialGradientId + ')');
		radialGradient.appendChild(stop1);
		radialGradient.appendChild(stop2);
		this.#svgElm.appendChild(radialGradient);
		this.#svgElm.appendChild(this.#polygon);
		this.#place?.appendChild(this.#svgElm);
	}
	#generateRandomId(idLength = 12) {
		const characters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
		return Array.from({length:idLength}, () => characters[Math.floor(Math.random() * characters.length)]).join('');
	}
	#animateSvg() {
		if (this.#scaleDirection == -1) {
			this.#scale -= 0.005;
			this.#svgElm.style.transform = 'scale(' + this.#scale + ')';
			if (this.#scale < 0.5) {
				this.#scaleDirection = 1;
			}
		} else if (this.#scaleDirection == 1) {
			this.#scale += 0.005;
			this.#svgElm.style.transform = 'scale(' + this.#scale + ')';
			if (this.#scale >= 1) {
				this.#scaleDirection = 0;
			}
		}
		//
		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 = [
			`${117 + this.#points[0]},${95 + this.#points[1]}`,
			` ${165 + this.#points[2]},${63 + this.#points[3]}`,
			` ${113 + this.#points[4]},${87 + this.#points[5]}`,
			` ${138 + this.#points[6]},${35 + this.#points[7]}`,
			` ${105 + this.#points[8]},${83 + this.#points[9]}`,
			` ${100 + this.#points[10]},${25 + this.#points[11]}`,
			` ${95 + this.#points[12]},${83 + this.#points[13]}`,
			` ${63 + this.#points[14]},${35 + this.#points[15]}`,
			` ${87 + this.#points[16]},${87 + this.#points[17]}`,
			` ${35 + this.#points[18]},${63 + this.#points[19]}`,
			` ${83 + this.#points[20]},${95 + this.#points[21]}`,
			` ${25 + this.#points[22]},${100 + this.#points[23]}`,
			` ${83 + this.#points[24]},${105 + this.#points[25]}`,
			` ${35 + this.#points[26]},${138 + this.#points[27]}`,
			` ${87 + this.#points[28]},${113 + this.#points[29]}`,
			` ${63 + this.#points[30]},${165 + this.#points[31]}`,
			` ${95 + this.#points[32]},${117 + this.#points[33]}`,
			` ${100 + this.#points[34]},${175 + this.#points[35]}`,
			` ${105 + this.#points[36]},${117 + this.#points[37]}`,
			` ${138 + this.#points[38]},${165 + this.#points[39]}`,
			` ${113 + this.#points[40]},${113 + this.#points[41]}`,
			` ${165 + this.#points[42]},${138 + this.#points[43]}`,
			` ${117 + this.#points[44]},${105 + this.#points[45]}`,
			` ${175 + this.#points[46]},${100 + this.#points[47]}`,
		].join('');
		this.#polygon.setAttribute('points',points);
		requestAnimationFrame(() => this.#animateSvg());
	}
}