Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Lit-html and SVG
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="module">
import { html, render } from 'https://unpkg.com/lit-html';
/** UNCOMMENT THE FOLLOWING AND COMMENT OUT THE IMPORT TO NOT USE LIT-HTML
const html = function(strings, ...values) {
let str = '';
strings.forEach((string, i) => {
str += string + values[i];
});
return str;
};
const render = function(template, el) { el.innerHTML = template; }
**/
const rectangle = html`<rect x="100" y="100" width="50" height="50" stroke="red" fill="green"></rect>`;
const template = html`
<svg viewBox="0 0 500 500">
<circle cx="50" cy="50" r="50" stroke="red" fill="red"></circle>
${rectangle}
</svg>`;
render(template, document.getElementById('container'));
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment