forked from evanstade/skiafy
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
59 lines (49 loc) · 1.93 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
<!-- Copyright 2019 The Skiafy Authors
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Skiafy your SVG</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="main.js"></script>
</head>
<h1>Skiafy</h1>
<p id="use-webkit" class="caveat">This tool probably doesn't work on your browser. Try Chromium.</p>
<p class="caveat">Caveat emptor! This program makes lots of assumptions. Its
output is just a starting point; you may have to manipulate it further.</p>
<p>Strongly consider pre-processing the SVG source with <a
href="https://jakearchibald.github.io/svgomg/">Jake Archibald’s SVGOMG tool</a>
(a web interface to <a href="https://github.com/svg/svgo/">the SVGO SVG
optimizer</a>).</p>
<div id="top-stuff">
<div id="input-stuff">
<p>Paste your SVG source below and then <button id="go-button">Skiafy!</button></p>
<p>Options:</p>
<p>
<label><input id="flip-x" type="checkbox"> Flip on <var>x</var> axis</label><br/>
<label><input id="flip-y" type="checkbox"> Flip on <var>y</var> axis</label>
</p>
<p>
Translate (applies after flip):<br/>
<input id="transform-x" placeholder="x"><br/>
<input id="transform-y" placeholder="y">
</p>
<textarea id="user-input"></textarea>
<div>
<span>Skiafied:</span>
<pre id="output-span">Skiafied output will be here</pre>
</div>
</div>
<div id="svg-anchor">
</div>
</div>
</html>