svg {
  float: left;
}
let cx = 50;
let cy = 50;
let r = 30;

let svg = `<svg height="100" width="100">
  <circle cx="${cx}" cy="${cy}" r="${r}" stroke="black" stroke-width="3" fill="red" />
</svg>`

let div = document.createElement('div');
div.innerHTML = svg;
document.body.appendChild(div);

// slightly more dynamic version
let circle = (o) => {
  let { w = 100, h = 100, cx = 0, cy = 0, r = 2 } = o;
  return `<svg height="${h}" width="${w}">
    <circle cx="${cx}" cy="${cy}" r="${r}" stroke="black" stroke-width="3" fill="red" />
  </svg>`
}

let div2 = document.createElement('div');
div2.innerHTML = circle({ cx: 20, r: 10 });
document.body.appendChild(div2);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.