SVGで作る

マウス移動に反応する球体のページ背景

ウェブサイトトップページの背景などに。

色相を変更:

Hue rotate
メインコード:
/**
 * ボールSVG画像出力
 *
 * @author ao-system, Inc.
 * @date 2024-02-02
 */

export class BallImage {
	'use strict';
	#place;
	#color = ['rgba(255,50,255,1)','rgba(50,50,255,1)'];
	#filter = 'blur(1px) drop-shadow(0 0 40px #ff0)';
	#svgElm;
	#svgPath;
	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();
		document.addEventListener('mousemove', (event) => this.#handleMouseMove(event));
		this.#handleMouseMove({clientX:0,clientY:0});
	}
	//<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>
	//	<path fill="url(#rg)" d="M150,100C150,127,127,150,100,150S50,127,50,100S72,50,100,50S150,72,150,100z"/>
	//</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;
		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.#svgPath = document.createElementNS('http://www.w3.org/2000/svg','path');
		this.#svgPath.setAttribute('fill','url(#' + radialGradientId + ')');
		radialGradient.appendChild(stop1);
		radialGradient.appendChild(stop2);
		this.#svgElm.appendChild(radialGradient);
		this.#svgElm.appendChild(this.#svgPath);
		this.#place?.appendChild(this.#svgElm);
	}
	#generateRandomId(idLength = 12) {
		const characters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
		return Array.from({length:idLength}, () => characters[Math.floor(Math.random() * characters.length)]).join('');
	}
	#handleMouseMove(event) {
		const ratioX = event.clientX / window.innerWidth;
		const ratioY = (event.clientY + window.scrollY) / window.innerHeight;
		const ratio = 100;
		const x1 = Math.max(0,(ratioX - 0.6) * ratio);
		const y1 = (ratioY - 0.5) * ratio;
		const x2 = (ratioX - 0.5) * ratio;
		const y2 = Math.max(0,(ratioY - 0.6) * ratio);
		const x3 = Math.min(0,(ratioX - 0.4) * ratio);
		const y3 = (ratioY - 0.5) * ratio;
		const x4 = (ratioX - 0.5) * ratio;
		const y4 = Math.min(0,(ratioY - 0.4) * ratio);
		const d = [
			`M${150 + x1},${100 + y1}C${150 + x1},${127 + y1},${127 + x2},${150 + y2},${100 + x2},${150 + y2}`,
			`S${50 + x3},${127 + y3},${50 + x3},${100 + y3}`,
			`S${72 + x4},${50 + y4},${100 + x4},${50 + y4}`,
			`S${150 + x1},${72 + y1},${150 + x1},${100 + y1}`,
			`z`,
		].join('');
		this.#svgPath.setAttribute('d',d);
	}
}
現時点はスマートフォン表示は想定していません。
SVGとCSSを工夫すれば多彩な表現が可能。それをJavaScriptでアニメ―トする。
工夫次第で面白い表現が可能。サイトデザインやコンセプトに合わせて目を引く背景画像を作成しよう。
この記事は2024年2月当時の物です。
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。
このページでお気付きの点がございましたら
ご連絡いただけますと幸いです。
Eメール(任意)
送信内容
 

便利ウェブサイト