Snippet Zone

Quick SVG

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

el.innerHTML = `<svg style='overlow:visible'>

  <circle cx="100" cy="20" r="20" fill="red" />

  <rect x="100" y="60" width="20" height="20" fill="blue" />

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

Defining SVG like this in a template string is a fast and powerful way to start doing SVG that is controlled or generated by JavaScript. Here is another example:

const scribble = document.body.appendChild(

```
    document.createElement('div'));
```
```
const d = (iter = 30) => {
```
```
  // make sure the iter is odd
```
```
  if (iter % 2 == 0) iter += 1;
```
```
  // random cubic beziér
```
```
  let path = 'M ';
```
```
  for (let i = 0; i < iter; i++) {
```
```
    const cmd = i == 1 ? 'C ' : ' '
```

    path += cmd + Math.random() * 200 + ' ' + Math.random() * 200;

```
  }
```
```
  return path + 'z';
```
```
}
```

scribble.innerHTML = `<svg style='overlow:visible' viewBox="0 0 200 200">

```
  <path d="${d()}" 
```
```
    stroke="#295896" 
```
```
    stroke-width="3"
```
```
    fill="#ccc" 
```
```
    fill-rule="even-odd"
```

    vector-effect="non-scaling-stroke" />

```
</svg>
```
```
<style>
```
```
  svg, div, body, html {
```
```
    overflow: visible; 
```
```
    height: 100%; 
```
```
    width: 100%;
```
```
    margin: 0; padding: 0;
```
```
  }
```
```
</style>
```
```
`;
```

You’ll notice a somewhat hacky style tag as well… this is used to quickly fill the page with the SVG.

August 5, 2021

// graphics // javascript // paths // random // svg // tricks

Quick SVG

Recent

Archive