Skip to content

Instantly share code, notes, and snippets.

@myun2

myun2/pilot.html

Last active February 25, 2018 09:05
Show Gist options
  • Save myun2/3bc7aebabb54db834d3c0608d43133ab to your computer and use it in GitHub Desktop.
Save myun2/3bc7aebabb54db834d3c0608d43133ab to your computer and use it in GitHub Desktop.
Download ZIP
Raw
pilot.html
<!DOCTYPE html><html><head><title>Pilot</title>
<link href="pilot.css" rel="stylesheet" type="text/css">
<style type="text/css">
* { margin: 0; padding: 0; }
body {
/*font-family: -apple-system, BlinkMacSystemFont,*/
font-family: "Helvetica Neue", "Segoe UI", sans-serif;
letter-spacing: 0.01em;
background-color: #170f0f;
color: #805858;
}
header { background-color: #080808; }
header.fixed { position: fixed; width: 100%; }
header.fixed + * { padding-top: 64px; }
header h1 { color: #fff; padding: 1px; font-size: 290%; }
main h1 { font-size: 10.5rem; color: #bd7bff; margin: -20px 5px; }
main { padding: 16px; font-size: 0.97rem; }
ul { padding: 16px; }
path {
fill: none;
stroke-width: 24px;
}
.cl1 { stroke: #262 }
.cl2 { stroke: #267 }
.cl3 { stroke: #fc0 }
.cl4 { stroke: #f20 }
</style>
<script>
document.addEventListener("DOMContentLoaded", function(event)
{
var svg = document.getElementById("svg");
var x = 20;
var y = 20;
var r = 0;
var data = [30,50,"R:90:35"];
for(var i=0; i<data.length; i++)
{
var a = document.createElementNS("http://www.w3.org/2000/svg","a");
a.setAttribute("href", "#" + i);
var item = data[i];
var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
var d = "M"+x+" "+y+" ";
if ( typeof item === 'number' ) {
x += item;
d += "L"+x+" "+y;
}
else {
var ary = item.split(":");
var cmd = ary[0];
var angle = Number(ary[1]);
var len = Number(ary[2]);
x += len;
d += "Q"+x+" "+y;
y += len;
d += " "+x+" "+y;
}
path.setAttribute("d", d);
path.setAttribute("class", "cl" + (i+1));
a.appendChild(path); svg.appendChild(a);
};
});
</script>
</head>
<body>
<header class="fixed">
<h1>Pilot</h1>
</header>
<main>
<h1>Pilot</h1>
<ul>
<li>Example Text hello hello hello....</li>
</ul>
</main>
<svg id="svg" xmlns="http://www.w3.org/2000/svg" />
</body>
</html>
Raw
pilot2.html
<!DOCTYPE html><html><head><title>Pilot</title>
<link href="pilot.css" rel="stylesheet" type="text/css">
<style type="text/css">
* { margin: 0; padding: 0; }
body {
/*font-family: -apple-system, BlinkMacSystemFont,*/
font-family: "Helvetica Neue", "Segoe UI", sans-serif;
letter-spacing: 0.01em;
color: #403333;
}
header { background-color: #080808; }
header.fixed { position: fixed; width: 100%; }
header.fixed + * { padding-top: 64px; }
header h1 { color: #fff; padding: 1px; font-size: 290%; }
main h1 { font-size: 3.1rem; color: #bd7bff; }
main { padding: 4px; font-size: 0.97rem; }
ul { padding: 6px; }
path {
fill: none;
stroke-width: 14px;
}
.cl1 { stroke: #262 }
.cl2 { stroke: #267 }
.cl3 { stroke: #fc0 }
.cl4 { stroke: #f20 }
</style>
<script>
document.addEventListener("DOMContentLoaded", function(event)
{
var svg = document.getElementById("svg");
var x = 10;
var y = 10;
var r = 0;
var data = [40,10,"R:90:20"];
for(var i=0; i<data.length; i++)
{
var a = document.createElementNS("http://www.w3.org/2000/svg","a");
a.setAttribute("href", "#" + i);
var item = data[i];
var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
var d = "M"+x+" "+y+" ";
if ( typeof item === 'number' ) {
x += item;
d += "L"+x+" "+y;
}
else {
var ary = item.split(":");
var cmd = ary[0];
var angle = Number(ary[1]);
var len = Number(ary[2]);
x += len;
d += "Q"+x+" "+y;
y += len;
d += " "+x+" "+y;
}
path.setAttribute("d", d);
path.setAttribute("class", "cl" + (i+1));
a.appendChild(path); svg.appendChild(a);
};
});
</script>
</head>
<body>
<header class="fixed">
<h1>Pilot</h1>
</header>
<main>
<h1>Pilot</h1>
<ul>
<li>Example Text hello hello hello....</li>
</ul>
</main>
<svg id="svg" xmlns="http://www.w3.org/2000/svg" />
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment