SVGで作る

速度表現のページ背景 左から右へ移動

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

色相を変更:

Hue rotate
メインコード:
/**
 * 左から右へ移動のSVG画像出力
 *
 * @author ao-system, Inc.
 * @date 2024-02-03
 */

export class LineImage {
	'use strict';
	#place;
	#color = ['rgba(100,150,255,0.1)','rgba(100,120,255,1)'];
	#filter = 'blur(3px) drop-shadow(-10px 100px 0px rgba(190,170,255,1))';
	#linearGradient;
	#rect;
	#rectX = 200;
	#rectWidth = 0;
	#speed = (Math.random() * 4 + 2);
	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();
		setTimeout(() => {
			this.#animateSvg();
		},Math.random() * 2000);
	}
	//<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>
	//	<rect fill="url(#lg)" x="22" width="70" height="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',25);
		this.#linearGradient.setAttribute('x2',200);
		this.#linearGradient.setAttribute('y2',25);
		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.#rect = document.createElementNS('http://www.w3.org/2000/svg','rect');
		this.#rect.setAttribute('fill','url(#' + linearGradientId + ')');
		this.#rect.setAttribute('x',0);
		this.#rect.setAttribute('width',0);
		this.#rect.setAttribute('height',50);
		this.#linearGradient.appendChild(stop1);
		this.#linearGradient.appendChild(stop2);
		svgElm.appendChild(this.#linearGradient);
		svgElm.appendChild(this.#rect);
		this.#place?.appendChild(svgElm);
	}
	#generateRandomId(idLength = 12) {
		const characters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
		return Array.from({length:idLength}, () => characters[Math.floor(Math.random() * characters.length)]).join('');
	}
	#animateSvg() {
		if (this.#rectX >= 200) {
			this.#rectWidth = Math.random() * 30 + 40;
			this.#rectX = -this.#rectWidth - (Math.random() * 50);
		}
		this.#rectX += this.#speed;
		this.#rect.setAttribute('x',this.#rectX);
		this.#rect.setAttribute('width',this.#rectWidth);
		this.#linearGradient.setAttribute('x1',this.#rectX);
		this.#linearGradient.setAttribute('x2',this.#rectX + this.#rectWidth);
		requestAnimationFrame(() => this.#animateSvg());
	}
}
スマートフォンなど非力なコンピュータでは処理が間に合わない場合が有ります。
処理性能に合わせて描画処理を切り分けるなど必要になります。
SVGとCSSを工夫すれば多彩な表現が可能。それをJavaScriptでアニメ―トする。
工夫次第で面白い表現が可能。サイトデザインやコンセプトに合わせて目を引く背景画像を作成しよう。
気まぐれコラム:
プログラマーまたはソフトウェアエンジニア業として特異なのは、ライブラリや開発環境の多くが無償で手に入るという点である。
これらを有難く使わせていただくのは問題ではないが、次のステップとして自身の知識やスキルを提供することも考えてみよう。これは業界全体をサポートすることであり、他の開発者への恩返しであり、同時に自らの更なるスキルアップにも繋がる。
提供された他の開発者のコードを見ることで、新しいアプローチやベストプラクティスを学び、成長することができるだろう。そして、創ることでプログラミングが単なる仕事ではなく、自分のアイディアを形にする喜びや楽しさを提供してくれるという本質的な価値を思い出すことができる。
新しいライブラリを使いこなすことも良い経験ではあるが、それ以上に重要なのは自ら考え、創り、そして提供することだ。生活のために短時間で作ることも原点ではあるが、自ら創り発信することも楽しさの原点ではないだろうか。
自ら創るとは言っても、プログラミング言語や環境は与えられたものであり、それらを組み替えているに過ぎない。よって完全オリジナルと言えるものではない。要は、感謝が大切ということだ。
(2024-02-03)
この記事は2024年2月当時の物です。
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。
このページでお気付きの点がございましたら
ご連絡いただけますと幸いです。
Eメール(任意)
送信内容
 

便利ウェブサイト