使用ReactJS和SVG绘制美丽的几何图案

SVG/ReactJS math patterns，包括向日葵花朵等22种图案，并可以调节参数。可用于制作数字图标。

svg, pattern

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2103
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

class MySVG extends React.Component {
	toRadians(angle) {
		return angle * (Math.PI / 180);
	}
	inverse() {
			document.body.classList.toggle('inverse');
	}
	render() {
		var canvas = {
			width: document.body.clientWidth * .95,
			height: document.body.clientHeight * .95,
		};
		if (canvas.width < canvas.height) {
			canvas.height = canvas.width;
		} else {
			canvas.width = canvas.height;
		}
		var rx = canvas.width / 2,
			ry = canvas.height / 2,
			sub = 1,
			angle = 0,
			subtract = parseFloat(this.props.subtract),
			accelerate = parseFloat(this.props.accelerate),
			maxrun = 20160,
			timeout = false,
			count = 0,
			d = "";

var graphData = [],
			startTime = new Date();
		var controlledTimeout = setTimeout(function runForMaxTime() {
			timeout = true;
		}, 2000);

do {
			sub += subtract;
			angle += parseFloat(this.props.step);
			var x = Math.cos(this.toRadians(angle)) * (rx - sub) + rx;
			var y = Math.sin(this.toRadians(angle)) * (ry - sub) + ry;
			d += (d == "") ? "M " + x + " " + y + " " + this.props.type + " " : x + " " + y + " ";
			subtract = subtract + accelerate;
			maxrun--;
			count++;
		} while (!timeout && (sub - subtract) < rx && maxrun > 0);
		clearTimeout(controlledTimeout);
		var renderTime = new Date() - startTime;
		return (
			<svg onTouchStart={this.inverse} onClick={this.inverse} width={canvas.width} height={canvas.height} viewBox={`0 0 ${canvas.width} ${canvas.height}`} version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns_xlink="http://www.w3.org/1999/xlink">
				
<path d={d} stroke-width=".1px" stroke={(maxrun>0) ? "rgba(0,0,0,.4)" : "rgba(255,0,0,.4)"} fill="none" />
<text x="0" y="14">Rendered in {renderTime} ms</text>
			</svg>
		)
	}
}

class App extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			type: this.props.type || 'L',
			step: parseFloat(this.props.step),
			subtract: parseFloat(this.props.subtract),
			accelerate: parseFloat(this.props.accelerate)
		};
		this.update.bind(this);
	}
	update(example) {
		let type = this.refs.type.value;
		let step = this.refs.step.value;
		let subtract = this.refs.subtract.value;
		let accelerate = this.refs.accelerate.value;
		var temp = example.target.value.split(",");
		if (temp.length === 4) {
			type = temp[0] || 'L';
			step = parseFloat(temp[1]);
			subtract = parseFloat(temp[2]);
			accelerate = parseFloat(temp[3]);

}
		this.setState({
			type: type,
			step: step,
			subtract: subtract,
			accelerate: accelerate
		})
	}
	toggle() {
		document.body.classList.toggle('inverse');
	}
	render() {
		return (
			<div>
				<div className="controls">
					<label>
					<select onChange={this.update.bind(this)}>
						<option value="L,226.75,0.14,0.002">Flower</option>
						<option value="C,90,0.362,0">Curve 1</option>
						<option value="C,225,-0.011,0.002">Curve 2</option>
						<option value="C,120,-0.088,0.067">Curve 3</option>
						<option value="Q,252,-4.928,.2">Quadratic 1</option>
						<option value="Q,90.75,0.362,0">Quandratic 2</option>
						<option value="Q25.75,0.351,0">Quandratic 3</option>
						<option value="L,225,-0.011,0.002">Line 1</option>
						
						<option value="L,166.5,0,0.05">Beautiful 1</option>
						<option value="L,127,0.193,0">A.S.Hansen</option>
						<option value="L,306.75,0.197,0">Beautiful 2</option>
						<option value="L,206.75,2.061,0">Beautiful 3</option>
						<option value="L,185.75,0.14,0.002">Beautiful 4</option>
						<option value="L,130.75,0.247,0">Beautiful 5</option>
						<option value="L,288.25,0.14,0.002">Beautiful 6</option>
						<option value="L,44.5,0,0.022">Classic 1</option>
						<option value="L,157.5,0.237,0">Classic 2</option>
						<option value="L,188.5,0.247,0">Intense 1</option>
						<option value="L,179.5,0.19,0">Intense 2</option>
						<option value="L,215.25,-3.003,0.004">Very intense  1</option>
						<option value="L,226.75,-1.308,0.002">Very intense  2</option>
						<option value="L,188.5,-5,0">Very intense  3</option>
					</select>
<label>
					<select ref="type" onChange={this.update.bind(this)} value={this.state.type}>
						<option value="L">Line</option>
						<option value="Q">Quadratic</option>
						<option value="C">Curveto</option>
					</select>
					</label>
					</label>
<label>step ({this.state.step})<br /> 
				<input ref="step" onChange={this.update.bind(this)} type="range" min="1" max="355" step=".25" value={this.state.step} /></label>
					<label>Subtract ({this.state.subtract})<br /> 
				<input ref="subtract" onChange={this.update.bind(this)} type="range" min="-5" max="5" step=".001" value={this.state.subtract} /></label>
<label>Accelerate ({this.state.accelerate})<br /> 
				<input ref="accelerate" onChange={this.update.bind(this)} type="range" min="0" max="5" step=".001" value={this.state.accelerate} /></label>

</div>
			<MySVG type={this.state.type} step={this.state.step} subtract={this.state.subtract} accelerate={this.state.accelerate} />
			</div>
		)
	}
}

const draw = () => {
	ReactDOM.render(<App step="226.75" subtract=".14" accelerate="0.002" />, document.querySelector('.app'));
};

window.onresize = draw;
document.onresize = draw;

draw();

编译

CSS

HTML

SVG/ReactJS math patterns，包括向日葵花朵等22种图案，并可以调节参数。可用于制作数字图标。

svg, pattern

编辑器支持Emmet

快捷键

SVG/ReactJS math patterns，包括向日葵花朵等22种图案，并可以调节参数。可用于制作数字图标。

svg, pattern

使用SVG feImage和feDisplacementMap滤镜属性实现的图片特效

使用React.js实现的SVG图形变形转换器

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：