Skip to content

Instantly share code, notes, and snippets.

@nzoschke

nzoschke/index.html

Created August 1, 2015 23:56
Show Gist options
  • Save nzoschke/f7ac30ec354870bffe7b to your computer and use it in GitHub Desktop.
Save nzoschke/f7ac30ec354870bffe7b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="svg" width="1080px" height="760px" viewBox="0 0 1080 760" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>assembly 2015</title>
<style>
.dark #background {
fill:black;
}
text {
fill: #ffffff;
}
text tspan {
font-size: 24pt;
font-family: monospace;
}
</style>
<defs>
<text id="term-blank" x="0" y="0">
<tspan x="0" >dot </tspan>
<tspan x="0" dy="36"> </tspan>
<tspan x="0" dy="36"> </tspan>
<tspan x="0" dy="36"> </tspan>
<tspan x="0" dy="36"> </tspan>
<tspan x="0" dy="36"> </tspan>
<tspan x="0" dy="36"> </tspan>
<tspan x="0" dy="36"> </tspan>
<tspan x="0" dy="36"> </tspan>
<tspan x="0" dy="36"> </tspan>
<tspan x="0" dy="36"> </tspan>
<tspan x="0" dy="36"> </tspan>
<tspan x="0" dy="36"> </tspan>
<tspan x="0" dy="36"> </tspan>
<tspan x="0" dy="36"> </tspan>
<tspan x="0" dy="36"> </tspan>
<tspan x="0" dy="36"> </tspan>
</text>
<text id="term-vu" x="0" y="0">
<tspan x="0" >/ </tspan>
<tspan x="0" dy="36">/ </tspan>
<tspan x="0" dy="36">/ </tspan>
<tspan x="0" dy="36">/ </tspan>
<tspan x="0" dy="36">/ </tspan>
<tspan x="0" dy="36">/ </tspan>
<tspan x="0" dy="36">/ </tspan>
<tspan x="0" dy="36">/ </tspan>
<tspan x="0" dy="36">/ </tspan>
<tspan x="0" dy="36">/ </tspan>
<tspan x="0" dy="36">/ </tspan>
<tspan x="0" dy="36">/ </tspan>
<tspan x="0" dy="36">/ </tspan>
<tspan x="0" dy="36">/ </tspan>
<tspan x="0" dy="36">/ </tspan>
<tspan x="0" dy="36">/ </tspan>
<tspan x="0" dy="36">/ </tspan>
</text>
<text id="term-dots" x="0" y="0">
<tspan x="0">................................................................................</tspan>
<tspan x="0" dy="36">................................................................................</tspan>
<tspan x="0" dy="36">................................................................................</tspan>
<tspan x="0" dy="36">................................................................................</tspan>
<tspan x="0" dy="36">................................................................................</tspan>
<tspan x="0" dy="36">................................................................................</tspan>
<tspan x="0" dy="36">................................................................................</tspan>
<tspan x="0" dy="36">................................................................................</tspan>
<tspan x="0" dy="36">................................................................................</tspan>
<tspan x="0" dy="36">................................................................................</tspan>
<tspan x="0" dy="36">................................................................................</tspan>
<tspan x="0" dy="36">................................................................................</tspan>
<tspan x="0" dy="36">................................................................................</tspan>
<tspan x="0" dy="36">................................................................................</tspan>
<tspan x="0" dy="36">................................................................................</tspan>
<tspan x="0" dy="36">................................................................................</tspan>
<tspan x="0" dy="36">................................................................................</tspan>
</text>
<text id="term-slash" x="0" y="0">
<tspan x="0">////////////////////////////////////////////////////////////////////////////////</tspan>
<tspan x="0" dy="36">////////////////////////////////////////////////////////////////////////////////</tspan>
<tspan x="0" dy="36">////////////////////////////////////////////////////////////////////////////////</tspan>
<tspan x="0" dy="36">////////////////////////////////////////////////////////////////////////////////</tspan>
<tspan x="0" dy="36">////////////////////////////////////////////////////////////////////////////////</tspan>
<tspan x="0" dy="36">////////////////////////////////////////////////////////////////////////////////</tspan>
<tspan x="0" dy="36">////////////////////////////////////////////////////////////////////////////////</tspan>
<tspan x="0" dy="36">////////////////////////////////////////////////////////////////////////////////</tspan>
<tspan x="0" dy="36">////////////////////////////////////////////////////////////////////////////////</tspan>
<tspan x="0" dy="36">////////////////////////////////////////////////////////////////////////////////</tspan>
<tspan x="0" dy="36">////////////////////////////////////////////////////////////////////////////////</tspan>
<tspan x="0" dy="36">////////////////////////////////////////////////////////////////////////////////</tspan>
<tspan x="0" dy="36">////////////////////////////////////////////////////////////////////////////////</tspan>
<tspan x="0" dy="36">////////////////////////////////////////////////////////////////////////////////</tspan>
<tspan x="0" dy="36">////////////////////////////////////////////////////////////////////////////////</tspan>
<tspan x="0" dy="36">////////////////////////////////////////////////////////////////////////////////</tspan>
<tspan x="0" dy="36">////////////////////////////////////////////////////////////////////////////////</tspan>
<tspan x="0" dy="36">////////////////////////////////////////////////////////////////////////////////</tspan>
</text>
</defs>
<g class="dark" id="terminal" x="0" y="0" >
<rect id="background" x="0" y="0" width="1080" height="760" rx="0" />
<use xlink:href="#term-blank" x="0" y="32"/>
<!--
<use xlink:href="#term-slash" x="0" y="32"/>
<line x1="808" y1="0" x2="403" y2="760" style="stroke:white;stroke-width:6" />
<line x1="789" y1="0" x2="384" y2="760" style="stroke:white;stroke-width:6" />
-->
</g>
</svg>
<script src="snap.svg.js"></script>
<script>
var e, es, n
var snap = Snap("#svg")
// 00 BEGIN / BLANK
snap.select("#terminal use").node.setAttribute("xlink:href", "#term-blank")
// 01-04 ASCII WAVEFORM
setTimeout(function() {
snap.select("#terminal use").node.setAttribute("xlink:href", "#term-vu")
es = snap.selectAll("#term-vu tspan")
setInterval(function() {
for (var i = 0; i < es.length; i++) {
es[i].node.innerHTML = Array(parseInt(Math.random() * 80)).join("/")
}
}, 150)
}, 20)
// e = s.select("#terminal line")
// e.animate({x1: 808 - 400, x2: 403 - 400}, 1000, mina.easeInOutSine)
// var t = 0
// setInterval(function() {
// href = t++ % 2 == 0 ? "#term-dots" : "#term-slash"
// s.select("#terminal use").node.setAttribute("xlink:href", href)
// }, 1000)
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment