<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SVG背景动画</title>
<style>
*{margin:0;padding:0;list-style-type:none;}
body {
overflow: hidden;
}
</style>
</head>
<body>
<svg id="mitosys"></svg>
<script>
var _createClass = function () {function defineProperties(target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);}}return function (Constructor, protoProps, staticProps) {if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;};}();function _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function");}} /*--------------------
Settings
--------------------*/
var settings = {
background: '#0a0117',
gradientStart: '#60000e',
gradientEnd: '#6616d4',
cells: 30,
minSize: 80,
maxSize: 160,
sensibility: 0.2,
download: function download() {
saveSVG();
},
random: function random() {
randomize();
}
/*--------------------
Vars
--------------------*/ };
var svg = document.getElementById('mitosys');
var winW = window.innerWidth,
winH = window.innerHeight,
ticker = 0,
Balls = [];
/*--------------------
Mouse
--------------------*/
var mouse = { x: 0, y: 0 };
var onMouseMove = function onMouseMove(e) {
mouse = {
x: e.clientX || e.pageX || e.touches[0].pageX || 0,
y: e.clientY || e.pageY || e.touches[0].pageY || 0 };
};
['mousemove', 'touchmove'].forEach(function (event) {
window.addEventListener(event, onMouseMove);
});
/*--------------------
Balls
--------------------*/var
Ball = function () {
function Ball(options) {_classCallCheck(this, Ball);
Object.assign(this, options);
this.r = settings.minSize + Math.random() * Math.abs(settings.maxSize - settings.minSize);
this.pos = {
x: Math.random() * (winW + this.r * 2),
y: Math.random() * (winH + this.r * 2) };
this.vel = 0.5;
this.dir = {
x: -1 + Math.random() * 2,
y: -1 + Math.random() * 2 };
this.acc = {
x: 0,
y: 0 };
this.diff = {
x: 0,
y: 0 };
this.options = {
cx: this.pos.x,
cy: this.pos.y,
r: this.r,
fill: 'url("#radialGradient")',
style: 'mix-blend-mode: lighten;' };
this.el = document.createElementNS(svg.namespaceURI, 'circle');
this.draw();
}_createClass(Ball, [{ key: 'draw', value: function draw()
{
for (var i in this.options) {
this.el.setAttribute(i, this.options[i]);
}
svg.appendChild(this.el);
} }, { key: 'checkDistance', value: function checkDistance()
{
this.diff.x = mouse.x - this.pos.x;
this.diff.y = mouse.y - this.pos.y;
this.dist = Math.sqrt(this.diff.x * this.diff.x + this.diff.y * this.diff.y);
} }, { key: 'remove', value: function remove()
{
this.el.parentNode.removeChild(this.el);
} }, { key: 'update', value: function update()
{
this.checkDistance();
if (this.dist < this.r) {
this.acc.x += -this.diff.x / this.r * settings.sensibility;
this.acc.y += -this.diff.y / this.r * settings.sensibility;
}
this.acc.x *= 0.96;
this.acc.y *= 0.96;
this.pos.x += this.dir.x * this.vel + this.acc.x;
this.pos.y += this.dir.y * this.vel + this.acc.y;
this.el.setAttribute('cx', this.pos.x);
this.el.setAttribute('cy', this.pos.y);
if (this.pos.x < -this.r) {
this.acc.x = -7;
this.pos.x = winW + this.r - 1;
} else if (this.pos.x > winW + this.r) {
this.acc.x = 7;
this.pos.x = -this.r + 1;
}
if (this.pos.y < -this.r) {
this.acc.y = -7;
this.pos.y = winH + this.r - 1;
} else if (this.pos.y > winH + this.r) {
this.acc.y = 7;
this.pos.y = -this.r + 1;
}
} }]);return Ball;}();
/*--------------------
Add Gradient
--------------------*/
var addGradient = function addGradient() {
var defs = document.createElementNS(svg.namespaceURI, 'defs');
var radialGradient = document.createElementNS(svg.namespaceURI, 'radialGradient');
var radialOptions = {
id: 'radialGradient',
spreadMethod: 'reflect',
cx: '50%',
cy: '50%',
r: '50%',
fx: '55%',
fy: '65%',
fr: '100%' };
for (var i in radialOptions) {
radialGradient.setAttribute(i, radialOptions[i]);
}
var radialGradientStart = document.createElementNS(svg.namespaceURI, 'stop');
radialGradientStart.setAttribute('offset', '0%');
radialGradientStart.setAttribute('stop-color', '#fff');
var radialGradientStop = document.createElementNS(svg.namespaceURI, 'stop');
radialGradientStop.setAttribute('offset', '100%');
radialGradientStop.setAttribute('stop-color', '#000');
var linearGradient = document.createElementNS(svg.namespaceURI, 'linearGradient');
var linearOptions = {
id: 'linearGradient',
x1: '0%',
y1: '100%',
x2: '100%',
y2: '0%' };
for (var _i in linearOptions) {
linearGradient.setAttribute(_i, linearOptions[_i]);
}
var linearGradientStart = document.createElementNS(svg.namespaceURI, 'stop');
linearGradientStart.setAttribute('class', 'gradient-start');
linearGradientStart.setAttribute('offset', '0%');
linearGradientStart.setAttribute('stop-color', settings.gradientStart);
var linearGradientEnd = document.createElementNS(svg.namespaceURI, 'stop');
linearGradientEnd.setAttribute('class', 'gradient-end');
linearGradientEnd.setAttribute('offset', '100%');
linearGradientEnd.setAttribute('stop-color', settings.gradientEnd);
svg.appendChild(defs);
defs.appendChild(radialGradient);
radialGradient.appendChild(radialGradientStart);
radialGradient.appendChild(radialGradientStop);
defs.appendChild(linearGradient);
linearGradient.appendChild(linearGradientStart);
linearGradient.appendChild(linearGradientEnd);
};
/*--------------------
CreateRect
--------------------*/
var createRects = function createRects() {