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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.