Skip to content

Instantly share code, notes, and snippets.

@gorbiz

gorbiz/index.html

Last active May 10, 2018 09:58
Show Gist options
  • Save gorbiz/78f351b598e4498ff95536c71596401c to your computer and use it in GitHub Desktop.
Save gorbiz/78f351b598e4498ff95536c71596401c to your computer and use it in GitHub Desktop.
Download ZIP
Playing with svg...
Raw
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; left:0; height:100%; width:100% }
body { background: #2a2030; }
.controls {
position: fixed;
bottom: 0;
}
</style>
<script type="x-tpl" id="tpl">
<g transform="translate(0 0) rotate(20 50 50) scale(0.8)" class="ko">
<rect x="100" y="0" width="100" height="100" fill="#f06" fill-opacity="0.5"></rect>
<g id="placeholder"></g>
</g>
</script>
</head>
<body>
<div id="drawing">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(100 100)" class="wrapper">
<g id="content"></g>
</g>
</svg>
</div>
<section class="controls">
<input type="range" min="0" max="1200" value="100" oninput="trans('.wrapper', /(translate\()([^ ]+)([^\)]*\))/, this.value)">
<input type="range" min="0" max="1200" value="100" oninput="trans('.wrapper', /(translate\([^ ]+ )([^\)]*)(\))/, this.value)">
<br>
<input type="range" min="0" max="300" value="100" oninput="derp('rect', 'width', this.value)">
<input type="range" min="0" max="300" value="100" oninput="derp('rect', 'height', this.value)">
<br>
<input type="range" min="0" max="300" value="100" oninput="derp('rect', 'x', this.value)">
<input type="range" min="0" max="300" value="0" oninput="derp('rect', 'y', this.value)">
<br>
<input type="range" min="-1" max="2" value="0.8" step="0.00001" oninput="trans('.ko', /(scale\()(.*)(\))/, this.value)">
<br>
<input type="range" min="0" max="360" value="20" step="1" oninput="trans('.ko', /(rotate\()([^ ]+)(.*\))/, this.value)">
<input type="range" min="-500" max="500" value="50" step="1" oninput="trans('.ko', /(rotate\([^ ]+ )([^ ]+)(.*\))/, this.value)">
<input type="range" min="-500" max="500" value="50" step="1" oninput="trans('.ko', /(rotate\([^ ]+ [^ ]+ )([^\)]+)(\))/, this.value)">
<br>
<input type="range" min="-100" max="300" value="0" oninput="trans('.ko', /(translate\()([^ ]+)([^\)]*\))/, this.value)">
<input type="range" min="-100" max="300" value="0" oninput="trans('.ko', /(translate\([^ ]+ )([^\)]*)(\))/, this.value)">
</section>
<script>
const is = 1000
const raw = document.getElementById('tpl').innerText
let res = raw
for (let i = 0; i < is; i++) {
res = res.replace('<g id="placeholder"></g>', raw)
}
document.querySelector('#content').innerHTML = res
function derp(match, attr, val) {
Array.from(document.querySelectorAll(`svg ${match}`)).forEach(el => {
el.setAttribute(attr, val);
})
}
function trans(match, reg, val) {
Array.from(document.querySelectorAll(`svg ${match}`)).forEach(el => {
let t = el.getAttribute('transform');
t = t.replace(reg, `$1${val}$3`)
el.setAttribute('transform', t);
})
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment