Snippet Zone

SVG Set Tag MDN

```
document.body.innerHTML = `
```
```
click the rounded rect<br>
```

<svg viewBox="0 0 10 10" width="150" height="150">

```
  <style>
```
```
    rect { cursor: pointer }
```
```
    .round { rx: 5px; fill: green; }
```
```
  </style>
```
```
 
```

  <rect id="me" width="10" height="10" rx="3">

    <set attributeName="class" to="round" begin="me.click" dur="2s" />

```
  </rect>
```
```
</svg>
```
```
`
```

This is from MDN. Having never seen or used the set tag before, I thought this was worth a quick post…

March 21, 2022

// javascript // svg // tricks // ui

Canvas Path2D

const canvas = document.body.appendChild(

```
  document.createElement('canvas')
```
```
)
```
```
const c = canvas.getContext('2d')
```
```
 
```
```
canvas.width = innerWidth
```
```
canvas.height = innerHeight
```
```
 
```
```
c.translate(10, 10)
```

const path = new Path2D('M 154.75 61.5 Q 169.75 63.8 184.8 69.35 173.15 68.3 161.7 69.4 173.1 73.85 184.8 75.95 173.1 77.15 161.65 75.95 173.05 80.45 184.8 82.55 173 83.75 160.05 82.35 173 87.05 184.8 89.15 172.95 90.35 161.65 89.1 172.9 93.65 184.8 95.75 172.8 96.9 161.65 95.7 172.8 100.2 184.8 102.35 172.75 103.5 163.7 102.7 172.7 106.8 184.8 110.3 172.7 110.1 161.65 108.85 172.6 113.35 184.8 118.85 171.05 116.05 158.35 114.65 167.3 126.9 174 141.45 166.5 132.45 157.65 125.1 162.55 136.3 169.35 146.1 160.2 138.65 152.95 129.7 157.85 141 164.7 150.75 155.5 143.25 147.3 133.15 153.15 145.6 160 155.45 150.75 147.9 143.65 139 148.45 150.2 155.35 160.1 146.05 152.4 139 143.65 143.7 154.75 150.7 164.75 141.3 157.05 135.5 150.05 139 159.35 145.05 170.4 136.65 161.7 129.7 152.95 134.25 163.9 139 176.45 131.3 164.75 123.3 154.8 121 169.8 115.45 184.8 116.5 173.15 115.4 161.7 110.95 173.1 108.85 184.8 107.65 173.1 108.85 161.65 104.35 173.05 102.25 184.8 101.05 173 102.45 160.05 97.75 173 95.65 184.8 94.45 172.95 95.7 161.65 91.15 172.9 89.05 184.8 87.9 172.8 89.1 161.65 84.6 172.8 82.45 184.8 81.3 172.75 82.1 163.7 78 172.7 74.5 184.8 74.7 172.7 75.95 161.65 71.45 172.6 65.95 184.8 68.75 171.05 70.15 158.4 57.9 167.35 43.35 174.05 52.35 166.55 59.7 157.7 48.5 162.6 38.7 169.4 46.15 160.25 55.1 153 43.8 157.9 34.05 164.75 41.55 155.55 51.65 147.35 39.2 153.2 29.35 160.05 36.9 150.8 45.8 143.7 34.6 148.5 24.7 155.4 32.4 146.1 41.15 139.05 30.05 143.75 20.05 150.75 27.75 141.35 34.75 135.55 25.45 139.05 14.4 145.1 23.1 136.7 31.85 129.75 20.9 134.3 8.35 139.05 20.05 131.3 30.05 123.3 15.05 121 0 115.45 11.65 116.5 23.1 115.4 11.7 110.95 0 108.85 11.7 107.65 23.15 108.85 11.75 104.35 0 102.25 11.8 101.05 24.75 102.45 11.8 97.75 0 95.65 11.85 94.45 23.15 95.7 11.9 91.15 0 89.05 12 87.9 23.15 89.1 12 84.6 0 82.45 12.05 81.3 21.1 82.1 12.1 78 0 74.5 12.1 74.7 23.15 75.95 12.2 71.45 0 65.95 13.75 68.75 26.45 70.15 17.45 57.9 10.75 43.35 18.25 52.35 27.1 59.7 22.2 48.5 15.4 38.7 24.55 46.15 31.8 55.1 26.9 43.8 20.05 34.05 29.25 41.55 37.45 51.65 31.6 39.2 24.75 29.35 34 36.9 41.1 45.8 36.3 34.6 29.4 24.7 38.7 32.4 45.75 41.15 41.05 30.05 34.05 20.05 43.45 27.75 49.25 34.75 45.75 25.45 39.7 14.4 48.1 23.1 55.05 31.85 50.5 20.9 45.75 8.35 53.5 20.05 61.5 30.05 63.8 15.05 69.35 0 68.3 11.65 69.4 23.1 73.85 11.7 75.95 0 77.15 11.7 75.95 23.15 80.45 11.75 82.55 0 83.75 11.8 82.35 24.75 87.05 11.8 89.15 0 90.35 11.85 89.1 23.15 93.65 11.9 95.75 0 96.9 12 95.7 23.15 100.2 12 102.35 0 103.5 12.05 102.7 21.1 106.8 12.1 110.3 0 110.1 12.1 108.85 23.15 113.35 12.2 118.85 0 116.05 13.75 114.65 26.45 126.9 17.45 141.45 10.75 132.45 18.25 125.1 27.1 136.3 22.2 146.1 15.4 138.65 24.55 129.7 31.8 141 26.9 150.75 20.05 143.25 29.25 133.15 37.45 145.6 31.6 155.45 24.75 147.9 34 139 41.1 150.2 36.3 160.1 29.4 152.4 38.7 143.65 45.75 154.75 41.05 164.75 34.05 157.05 43.45 150.05 49.25 159.35 45.75 170.4 39.7 161.7 48.1 152.95 55.05 163.9 50.5 176.45 45.75 164.75 53.5 154.75 61.5 140.2 73.15 129.35 85.4 146 97.85 158.35 114.65 M 61.5 30.05 Q 73.15 44.6 85.4 55.45 97.8 38.8 114.65 26.45 M 30.05 123.3 Q 44.6 111.65 55.45 99.45 38.8 87 26.45 70.15 M 123.3 154.8 Q 111.65 140.25 99.4 129.4 86.95 146.05 70.15 158.4');

```
 
```
```
c.stroke(path);
```

Use SVG style paths in canvas…

March 9, 2022

// canvas // javascript // svg

xPath and svg

// hack to shove some html on the page since snippet.zone

// quick editor does not yet suppor HTML :P

```
document.body.innerHTML += `
```
```
  <svg style="overflow:visible">
```

  <rect x="10" y="10" fill="red" width="30" height="10" />

  <rect x="10" y="20" fill="blue" width="30" height="10" />

  <rect x="10" y="30" fill="purple" width="30" height="10" />

```
  </svg>
```
```
`;
```
```
 
```

const svgPrefix = pre => pre === 'svg' && 'http://www.w3.org/2000/svg';

```
 
```

// https://stackoverflow.com/questions/31162358/extract-svg-element-by-using-document-evaluate

```
let els = document.evaluate(
```
```
  '//svg:svg/*[@fill="blue"]',
```
```
  document,
```
```
  svgPrefix,
```
```
  XPathResult.ANY_TYPE,
```
```
  null
```
```
);
```
```
 
```
```
const results = [];
```
```
while ((el = els.iterateNext())) {
```

  // save results to avoid mutation error

```
  results.push(el);
```
```
}
```
```
results[0].x.baseVal.value = 50;
```

results[0].setAttribute('stroke', 'orange');

results[0].setAttribute('stroke-width', 2);

Now that IE 11 is almost dead… we can use document.evaluate – I knew there would be some trick to get it to work on svg… Found the answer from user Martin Honnen on stackoverflow – very cool.

Of course this one can be done with document.querySelectorAll('*[fill="blue"]') – but xPath can do some other stuff that css selectors can’t exactly do yet…

February 10, 2022

// svg // xPath

Drag Svg Circles

document.addEventListener('touchmove', (e) => e.preventDefault(), {

```
  passive: false,
```
```
});
```
```
 
```

// this is just lazy - obviously goes in your stylesheet.... :P

```
document.body.innerHTML += `
```
```
<style>
```
```
  body, html {
```
```
    padding: 0;
```
```
    height: 100%;
```
```
    margin: 0;
```
```
  }
```
```
</style>
```
```
`;
```
```
 
```

const temp = document.createElement('div');

temp.innerHTML = `<svg width="100%" height="100%" viewBox="0 0 500 500"></svg>`;

```
 
```

const svg = document.body.appendChild(temp.querySelector('svg'));

```
 
```
```
const CIRCLE_NUM = 4;
```
```
 
```

// make some randomly positioned circles

```
for (let i = 0; i < CIRCLE_NUM; i++) {
```
```
  const x = Math.random() * 150 + 150;
```
```
  const y = Math.random() * 150 + 150;
```
```
  svg.innerHTML += `<circle 
```
```
    cx="${x}" cy="${y}" r="60" 
```

    stroke="#000" fill="rgba(81, 121, 200, 0.3)"

```
    style="cursor:pointer" />`;
```
```
}
```
```
 
```
```
function touch(e) {
```
```
  const pt = svg.createSVGPoint();
```
```
  pt.x = e.clientX;
```
```
  pt.y = e.clientY;
```

  return pt.matrixTransform(svg.getScreenCTM().inverse());

```
}
```
```
 
```
```
let down, ox, oy, curr;
```

document.addEventListener('pointerdown', (e) => {

```
  down = true;
```
```
  if (e.target.tagName === 'circle') {
```
```
    curr = e.target;
```
```
    const { x, y } = touch(e);
```
```
    ox = curr.cx.baseVal.value - x;
```
```
    oy = curr.cy.baseVal.value - y;
```
```
  }
```
```
});
```
```
 
```

document.addEventListener('pointermove', (e) => {

```
  if (down && curr) {
```
```
    const { x, y } = touch(e);
```
```
    curr.cx.baseVal.value = x + ox;
```
```
    curr.cy.baseVal.value = y + oy;
```
```
  }
```
```
});
```
```
 
```

document.addEventListener('pointerup', (e) => {

```
  down = false;
```
```
  curr = null;
```
```
});
```

Drag some svg circles on mobile and desktop…

January 23, 2022

// javascript // svg // ui

SVG Isometric Box

```
const el = document.body.appendChild(
```
```
document.createElement('div'));
```
```
 
```
```
el.innerHTML = `
```

  <svg id="svg" width="100%" height="100%" viewBox="0 0 550 500">

```
    ${(() => {
```
```
      let str = ''
```
```
      let c = 10;
```
```
      let num = 200;
```
```
      let colStep = 225 / num
```
```
      for (let i = 0; i < num; i++) {
```
```
        c += colStep;
```
```
        col = `rgb(${c}, ${c}, ${c})`;
```
```
        str += `<rect 
```
```
          fill="${col}" 
```
```
          x="0" y="0" 
```
```
          width="200" height="200" 
```

          transform="translate(275, ${250 - i}) scale(1, .5) rotate(45)" />`

```
      }
```
```
      return str
```
```
    })()}
```
```
  </svg>
```
```
  <style>
```
```
    svg, div, body, html {
```
```
      overflow: visible; 
```
```
      height: 100%; 
```
```
      width: 100%;
```
```
      margin: 0; padding: 0;
```
```
      background: gray;
```
```
    }
```
```
  </style>
```
```
  `;
```

Draw a shaded isometric box in SVG.

November 23, 2021

// dom // javascript // strings // svg

Older Posts

SVG Set Tag MDN

Canvas Path2D

xPath and svg

Drag Svg Circles

SVG Isometric Box

Recent

Archive