1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="0 0 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
<style>
svg {
overflow: hidden;
}
circle, rect {
fill-opacity: 0.9;
}
</style>
<script type="text/javascript">//<![CDATA[
const svgns = 'http://www.w3.org/2000/svg',
svg = document.querySelector('svg'),
{ width: vbWidth, height: vbHeight } = svg.viewBox.baseVal,
shapeCount = 100,
maxColorValue = 256,
circleRadius = { max: 45, min: 5 },
rectSideLength = { max: 95, min: 5 };
function getRandomInt(max) {
return Math.floor(Math.random() * max);
}
function getRandomPositiveInt(max) {
return getRandomInt(max) + 1;
}
function getRandomFillAndStrokeVals() {
const shadeFactor = Math.random(),
fill = ['r', 'g', 'b'].map(() => getRandomInt(maxColorValue)),
stroke = fill.map(v => Math.floor(v * shadeFactor));
return {
fill: fill,
stroke: stroke
};
}
function getRandomCircle(fill, stroke) {
const el = document.createElementNS(svgns, 'circle'),
r = getRandomPositiveInt(circleRadius.max) + circleRadius.min;
el.setAttributeNS(null, 'cx', getRandomInt(vbWidth));
el.setAttributeNS(null, 'cy', getRandomInt(vbHeight));
el.setAttributeNS(null, 'r', r);
el.setAttributeNS(null, 'fill', fill);
el.setAttributeNS(null, 'stroke', stroke);
return el;
}
function getRandomRect(fill, stroke) {
const el = document.createElementNS(svgns, 'rect'),
[width, height] = ['w', 'h'].map(() =>
getRandomPositiveInt(rectSideLength.max) + rectSideLength.min
);
el.setAttributeNS(null, 'x', getRandomInt(vbWidth));
el.setAttributeNS(null, 'y', getRandomInt(vbHeight));
el.setAttributeNS(null, 'width', width);
el.setAttributeNS(null, 'height', height);
el.setAttributeNS(null, 'fill', fill);
el.setAttributeNS(null, 'stroke', stroke);
return el;
}
function getRandomShape({ fill: fillVals, stroke: strokeVals }) {
const shapes = [getRandomCircle, getRandomRect],
[fill, stroke] = [fillVals, strokeVals].map(v => `rgb(${v.join(', ')})`);
return shapes[getRandomInt(shapes.length)](fill, stroke);
}
[...Array(shapeCount)]
.map(() => getRandomFillAndStrokeVals())
.forEach(fillAndStrokeVal => svg.appendChild(getRandomShape(fillAndStrokeVal)));
//]]></script>
</svg>
|
