彩色圆圈的html代码,svg

y0) rankx++;

else ranky++;

if (x0 > z0) rankx++;

else rankz++;

if (x0 > w0) rankx++;

else rankw++;

if (y0 > z0) ranky++;

else rankz++;

if (y0 > w0) ranky++;

else rankw++;

if (z0 > w0) rankz++;

else rankw++;

var i1, j1, k1, l1; // The integer offsets for the second simplex corner

var i2, j2, k2, l2; // The integer offsets for the third simplex corner

var i3, j3, k3, l3; // The integer offsets for the fourth simplex corner

// simplex[c] is a 4-vector with the numbers 0, 1, 2 and 3 in some order.

// Many values of c will never occur, since e.g. x>y>z>w makes x= 3 ? 1 : 0;

j1 = ranky >= 3 ? 1 : 0;

k1 = rankz >= 3 ? 1 : 0;

l1 = rankw >= 3 ? 1 : 0;

// Rank 2 denotes the second largest coordinate.

i2 = rankx >= 2 ? 1 : 0;

j2 = ranky >= 2 ? 1 : 0;

k2 = rankz >= 2 ? 1 : 0;

l2 = rankw >= 2 ? 1 : 0;

// Rank 1 denotes the second smallest coordinate.

i3 = rankx >= 1 ? 1 : 0;

j3 = ranky >= 1 ? 1 : 0;

k3 = rankz >= 1 ? 1 : 0;

l3 = rankw >= 1 ? 1 : 0;

// The fifth corner has all coordinate offsets = 1, so no need to compute that.

var x1 = x0 - i1 + G4; // Offsets for second corner in (x,y,z,w) coords

var y1 = y0 - j1 + G4;

var z1 = z0 - k1 + G4;

var w1 = w0 - l1 + G4;

var x2 = x0 - i2 + 2.0 * G4; // Offsets for third corner in (x,y,z,w) coords

var y2 = y0 - j2 + 2.0 * G4;

var z2 = z0 - k2 + 2.0 * G4;

var w2 = w0 - l2 + 2.0 * G4;

var x3 = x0 - i3 + 3.0 * G4; // Offsets for fourth corner in (x,y,z,w) coords

var y3 = y0 - j3 + 3.0 * G4;

var z3 = z0 - k3 + 3.0 * G4;

var w3 = w0 - l3 + 3.0 * G4;

var x4 = x0 - 1.0 + 4.0 * G4; // Offsets for last corner in (x,y,z,w) coords

var y4 = y0 - 1.0 + 4.0 * G4;

var z4 = z0 - 1.0 + 4.0 * G4;

var w4 = w0 - 1.0 + 4.0 * G4;

// Work out the hashed gradient indices of the five simplex corners

var ii = i & 255;

var jj = j & 255;

var kk = k & 255;

var ll = l & 255;

// Calculate the contribution from the five corners

var t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0 - w0 * w0;

if (t0 < 0) n0 = 0.0;

else {

var gi0 = (perm[ii + perm[jj + perm[kk + perm[ll]]]] % 32) * 4;

t0 *= t0;

n0 = t0 * t0 * (grad4[gi0] * x0 + grad4[gi0 + 1] * y0 + grad4[gi0 + 2] * z0 + grad4[gi0 + 3] * w0);

}

var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1 - w1 * w1;

if (t1 < 0) n1 = 0.0;

else {

var gi1 = (perm[ii + i1 + perm[jj + j1 + perm[kk + k1 + perm[ll + l1]]]] % 32) * 4;

t1 *= t1;

n1 = t1 * t1 * (grad4[gi1] * x1 + grad4[gi1 + 1] * y1 + grad4[gi1 + 2] * z1 + grad4[gi1 + 3] * w1);

}

var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2 - w2 * w2;

if (t2 < 0) n2 = 0.0;

else {

var gi2 = (perm[ii + i2 + perm[jj + j2 + perm[kk + k2 + perm[ll + l2]]]] % 32) * 4;

t2 *= t2;

n2 = t2 * t2 * (grad4[gi2] * x2 + grad4[gi2 + 1] * y2 + grad4[gi2 + 2] * z2 + grad4[gi2 + 3] * w2);

}

var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3 - w3 * w3;

if (t3 < 0) n3 = 0.0;

else {

var gi3 = (perm[ii + i3 + perm[jj + j3 + perm[kk + k3 + perm[ll + l3]]]] % 32) * 4;

t3 *= t3;

n3 = t3 * t3 * (grad4[gi3] * x3 + grad4[gi3 + 1] * y3 + grad4[gi3 + 2] * z3 + grad4[gi3 + 3] * w3);

}

var t4 = 0.6 - x4 * x4 - y4 * y4 - z4 * z4 - w4 * w4;

if (t4 < 0) n4 = 0.0;

else {

var gi4 = (perm[ii + 1 + perm[jj + 1 + perm[kk + 1 + perm[ll + 1]]]] % 32) * 4;

t4 *= t4;

n4 = t4 * t4 * (grad4[gi4] * x4 + grad4[gi4 + 1] * y4 + grad4[gi4 + 2] * z4 + grad4[gi4 + 3] * w4);

}

// Sum up and scale the result to cover the range [-1,1]

return 27.0 * (n0 + n1 + n2 + n3 + n4);

}

};

function buildPermutationTable(random) {

var i;

var p = new Uint8Array(256);

for (i = 0; i < 256; i++) {

p[i] = i;

}

for (i = 0; i < 255; i++) {

var r = i + ~~(random() * (256 - i));

var aux = p[i];

p[i] = p[r];

p[r] = aux;

}

return p;

}

SimplexNoise._buildPermutationTable = buildPermutationTable;

// amd

if (typeof define !== 'undefined' && define.amd) define(function() {return SimplexNoise;});

// common js

if (typeof exports !== 'undefined') exports.SimplexNoise = SimplexNoise;

// browser

else if (typeof window !== 'undefined') window.SimplexNoise = SimplexNoise;

// nodejs

if (typeof module !== 'undefined') {

module.exports = SimplexNoise;

}

})();

/*

Johan Karlsson (DonKarlssonSan) 2018

*/

var canvas = void 0,

ns = void 0,

group = void 0;

var w = void 0,

h = void 0;

var m = void 0;

var simplex = void 0;

var ticker = void 0;

var mx = void 0,

my = void 0;

var hue = void 0;

function setup() {

canvas = document.querySelector("#canvas");

group = document.querySelector("#group");

h1 = document.querySelector(".h1");

ns = canvas.namespaceURI;

hue = parseInt(Math.random() * 360);

h1.style.color = "hsla(" + hue + ", 100%, 50%, .5)";

reset();

window.addEventListener("resize", reset);

canvas.addEventListener("click", click);

}

function reset() {

simplex = new SimplexNoise();

ticker = 0;

w = canvas.width = window.innerWidth;

h = canvas.height = window.innerHeight;

m = Math.min(w, h);

mx = w / 2;

my = h / 2;

}

function click(event) {

mx = event.clientX + 1;

my = event.clientY + 1;

draw();

}

function draw() {

ticker += 0.01;

group.innerHTML = '';

// requestAnimationFrame(draw);

for (var i = 10; i < m / 2 - 40; i += 25) {

drawCircle(i);

}

}

function drawCircle(r) {

var d = '';

var point = void 0,

x = void 0,

y = void 0;

for (var angle = 0; angle < Math.PI * 2; angle += 0.02) {

point = calcPoint(angle, r);

d += (d === '' ? 'M ' : '') + " " + point[0] + " " + point[1] + " " + (d === '' ? ' L ' : '');

}

d += ' Z';

addPath(d);

}

function addPath(d) {

var path = document.createElementNS(ns, 'path');

path.setAttribute('d', d);

var fill = getColor();

console.log(fill);

path.setAttribute('fill', fill);

// path.setAttribute('stroke', 'black');

group.appendChild(path);

}

function getColor() {

var saturation = parseInt(Math.random() * 100),

lightness = parseInt(Math.random() * 40 + 60),

opacity = Math.random() * .3;

return "hsla(" + hue + ", " + saturation + "%, " + lightness + "%, " + opacity + ")";

}

function calcPoint(angle, r) {

var noiseFactor = mx / w * 50;

var zoom = my / h * 200;

var x = Math.cos(angle) * r + w / 2;

var y = Math.sin(angle) * r + h / 2;

n = simplex.noise3D(x / zoom, y / zoom, ticker) * noiseFactor;

x = Math.cos(angle) * (r + n) + w / 2;

y = Math.sin(angle) * (r + n) + h / 2;

return [x, y];

}

setup();

draw();

var copyEle = document.querySelector('.copy'),

outer = document.querySelector('.outer');

copyEle.addEventListener("click", function () {

copy(outer.innerHTML);

});

function copy(textToCopy) {

try {

var textArea = document.createElement("textarea");

textArea.setAttribute("style", "width:1px;border:0;opacity:0;");

document.body.appendChild(textArea);

textArea.value = textToCopy;

textArea.select();

document.execCommand("copy");

document.body.removeChild(textArea);

alert("SVG is on clipboard");

} catch (_ref) {

var message = _ref.message;

alert("Could not copy text: " + message);

}

}