Skip to content

Instantly share code, notes, and snippets.

@drewlesueur

drewlesueur/preact_svg.html

Created March 10, 2018 05:38
Show Gist options
  • Save drewlesueur/dac68b2625ca16d88a8ff35a122abe9f to your computer and use it in GitHub Desktop.
Save drewlesueur/dac68b2625ca16d88a8ff35a122abe9f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
preact_svg.html
<!doctype html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/preact/8.2.7/preact.dev.js"></script>
<div id="app"></div>
<script>
var app = {
color: "#00ffff",
}
function changeColor(e) {
app.color = e.target.value
render()
}
function View(app) {
return preact.h('div', {},
preact.h("input", {value: app.color, type: "color", id: "color", onchange: changeColor}),
preact.h("br"),
preact.h("svg", {width: 100, height: 100, viewBox: "0 0 100 100"},
preact.h("rect", {x: 0, y: 0, width: 100, height: 100, style: 'fill:' + app.color})
)
)
}
function render() {
preact.render(View(app), document.getElementById('app'), document.getElementById('app').firstChild)
}
render()
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment