-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
61 lines (59 loc) · 2.16 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
<head>
<title>Interchain Foundation Emblem Renderer</title>
<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico" />
<link rel="stylesheet" href="assets/style.css" />
</head>
<body>
<section>
<div class="svg-container">
<script src="render.js" data-size="120"></script>
<p class="p-t">
<label class="p-r">Yaw</label
><input type="number" id="inputYaw" value="0" class="t-mono" />
<label class="p-r">Roll</label
><input type="number" id="inputRoll" value="0" class="t-mono" />
(deg)
</p>
</div>
<div class="p-l2">
<h1>Interchain Foundation Emblem Renderer v1</h1>
<p>
1. Click image to download as SVG. Please make sure to "Outline
Stroke" in apps such as Illustrator to preserve the stroke weight upon
scaling.
</p>
<p>
2. For placement of animated emblem on a webpage, put below code where
it needs to be shown. For various display options, see documentation
on
<a href="https://github.com/interchainio/interchain-emblem-renderer"
>GitHub</a
>.
</p>
<xmp><script src="https://interchainio.github.io/interchain-emblem-renderer/render.js" data-animate data-size="300"></script></xmp>
</div>
</section>
<script>
var inputs = document.querySelectorAll("input");
for (let i = 0; i < inputs.length; i++) {
inputs[i].addEventListener("input", (event) => {
yaw = document.querySelector("#inputYaw").value;
roll = document.querySelector("#inputRoll").value;
drawPaths();
});
}
var emblemSvg = document.querySelector(".svg-container svg");
emblemSvg.addEventListener("click", function () {
var html = this.outerHTML;
var blob = new Blob([html.toString()]);
var element = document.createElement("a");
element.download = "Interchain-Foundation-Emblem.svg";
element.href = window.URL.createObjectURL(blob);
element.click();
element.remove();
});
</script>
</body>
</html>