| index : pan-zoom | |
| SVG pan/zoom library. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2024-04-20 19:34:06 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-04-23 10:09:51 -0700 |
| commit | 2d3fc1cd22ffcc61ec178eeaf97f3a4d7cba98bf (patch) | |
| tree | a072ea398ce00b68dd0e5e670b32ac5ee1a812ad /public/image.svg | |
| parent | 263201d869956b94660d4efa8297e89dadbe36a8 (diff) | |
Use CSS transformations instead of manipulating the viewBox
Diffstat (limited to 'public/image.svg')
| -rw-r--r-- | public/image.svg | 82 |
1 files changed, 0 insertions, 82 deletions
diff --git a/public/image.svg b/public/image.svg deleted file mode 100644 index 5a5c3d9..0000000 --- a/public/image.svg +++ /dev/null @@ -1,82 +0,0 @@ -<?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> |
