/
index.html
162 lines (150 loc) · 9.03 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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html>
<head>
<!--
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
▀▀▀▄▄▀▄▄▄▀▀▀▀▀▀▀▄▄▀▀▀███▀▄▀▀▀▀▀▀▀▀▀▀▀▄
█░░ █▀▀ ▀█▀ ▀ █▀ █░█░█ ▄▀█ █▀█ █▀█ █
█▄▄ ██▄ ░█░ ░ ▄█ ▀▄▀▄▀ █▀█ █▀▄ █▀▀ ▄
▀▀▀▀▀▀▀▄▄▀▀▀▀▀███▀▀▀▀▀▀▀▀▄▄▄▄▄▄▄▄▀▀▀▀▀
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
-->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="google-site-verification" content="BAI5bOtwhTdX1fYp4eCFLnIcxlQ6_ijx1fOorUFRcQE" />
<!-- Description -->
<title>Warp SVG Online</title>
<meta name="description" content="Warp and distort SVG online">
<meta name="author" content="Pavel Laptev">
<!-- Icons -->
<link rel="icon" type="image/png" sizes="16x16" href="./dist/images/favicons/favico-16.png">
<link rel="icon" type="image/png" sizes="32x32" href="./dist/images/favicons/favico-32.png">
<link rel="apple-touch-icon" type="image/png" sizes="128x128" href="./dist/images/favicons/favico-128.png">
<link rel="apple-touch-icon" type="image/png" sizes="152x152" href="./dist/images/favicons/favico-152.png">
<link rel="apple-touch-icon" type="image/png" sizes="167x167" href="./dist/images/favicons/favico-167.png">
<!-- Social media -->
<meta property="og:title" content="Warp SVG online">
<meta property="og:image"
content="https://raw.githubusercontent.com/PavelLaptev/warp-svg/master/dist/images/web-preview.jpg">
<meta property="og:url" content="https://pavellaptev.github.io/warp-svg">
<meta property="og:description" content="Warp and distort SVG online">
<link href="dist/css/app.css" rel="stylesheet"></head>
<body>
<div id="loader">
<div id="loader-spinner"></div>
</div>
<div id="if-mobile" style="opacity: 0; display: none; pointer-events: none;">
<div class="icon"></div>
</div>
<div id="app" style="opacity: 0">
<div class="dropzone-preview">
<div class="info">
<div class="icon"></div>
<h2 class="caption">Drop SVG file here</h2>
</div>
<div class="overlay"></div>
</div>
<div class="switcher">
<input type="checkbox" id="switch-theme" name="theme-switcher" />
<label for="switch-theme">Theme</label>
</div>
<div class="actions">
<div class="content-block" id="info-block">
<div class="close-btn"></div>
<h3>How To Use:</h3>
<ul>
<li>
<p>Use this <a style="font-size: 18px;"
href="https://www.figma.com/file/RqhYd0CaFD2f9dvz0m360Z/Warp-SVG-Online?node-id=1%3A2"
target="_blank">tutorial</a> to avoid artifacts</p>
</li>
<li>
<p>Drag'n'Drop to upload your SVG File</p>
</li>
<li>
<p>Hold 'Space' and pan to move around the canvas</p>
</li>
<li>
<p>Scroll to zoom</p>
</li>
</ul>
<hr />
<div class="links">
<a href="https://github.com/PavelLaptev/warp-svg" target="_blank" class="social-media">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<path
d="M12.0298 3C7.0333 3 3 6.89861 3 11.7282C3 15.5687 5.58853 18.8272 9.20044 19.991C9.68203 20.0491 9.80242 19.8164 9.80242 19.5836V18.0707C7.27409 18.5944 6.7323 16.907 6.7323 16.907C6.31091 15.9178 5.70893 15.6268 5.70893 15.6268C4.86615 15.1031 5.76913 15.1031 5.76913 15.1031C6.67211 15.1613 7.15369 15.976 7.15369 15.976C7.93627 17.3143 9.26064 16.907 9.80242 16.6742C9.86262 16.0923 10.1034 15.7432 10.4044 15.5105C8.41786 15.2777 6.31091 14.5213 6.31091 11.2045C6.31091 10.2735 6.67211 9.45889 7.21389 8.87701C7.09349 8.64426 6.7925 7.77143 7.27409 6.54948C7.27409 6.54948 8.05667 6.31673 9.74223 7.4223C10.4646 7.24774 11.2472 7.13136 12.0298 7.13136C12.8123 7.13136 13.5949 7.24774 14.3173 7.4223C16.0631 6.31673 16.7854 6.54948 16.7854 6.54948C17.267 7.77143 16.966 8.64426 16.8456 8.87701C17.4476 9.45889 17.7486 10.2735 17.7486 11.2045C17.7486 14.5795 15.6417 15.2777 13.6551 15.5105C13.9561 15.8014 14.2571 16.3251 14.2571 17.1397V19.5255C14.2571 19.7582 14.4377 20.0491 14.8591 19.9328C18.471 18.769 20.9993 15.5105 20.9993 11.67C21.0595 6.89861 17.0262 3 12.0298 3Z" />
</svg>
<span>GitHub</span>
</a>
<a href="https://youtu.be/R-hjZG9eNsk" target="_blank" class="social-media">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<path
d="M11.9926 4C11.9926 4 4.49158 4.00001 2.60893 4.47662C1.6009 4.75103 0.770861 5.55973 0.489204 6.55628C1.11457e-05 8.39051 0 12.189 0 12.189C0 12.189 1.11457e-05 16.002 0.489204 17.8074C0.770861 18.8039 1.58607 19.5981 2.60893 19.8726C4.5064 20.3636 11.9926 20.3636 11.9926 20.3636C11.9926 20.3636 19.5084 20.3636 21.391 19.887C22.4139 19.6126 23.2291 18.8328 23.4959 17.8218C23.9999 16.002 24 12.2035 24 12.2035C24 12.2035 24.0148 8.39051 23.4959 6.55628C23.2291 5.55973 22.4139 4.76549 21.391 4.50552C19.5084 4.00002 11.9926 4 11.9926 4V4ZM9.60587 8.67952L15.8469 12.189L9.60587 15.6841V8.67952V8.67952Z" />
</svg>
<span>Demo</span>
</a>
<a href="https://github.com/PavelLaptev/warp-svg/issues" target="_blank" class="social-media">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<path
d="M6.85501 8.57504C9.15261 4.74572 10.3014 2.83105 12 2.83105C13.6985 2.83105 14.8473 4.74571 17.1449 8.57503L18.5478 10.9131C20.9651 14.9419 22.1737 16.9563 21.312 18.4782C20.4503 20.0001 18.1012 20.0001 13.4028 20.0001H10.5971C5.89879 20.0001 3.54963 20.0001 2.68795 18.4782C1.82626 16.9563 3.03489 14.9419 5.45216 10.9131L6.85501 8.57504ZM12 7C11.1716 7 10.5 7.67157 10.5 8.5V11.5C10.5 12.3284 11.1716 13 12 13C12.8284 13 13.5 12.3284 13.5 11.5V8.5C13.5 7.67157 12.8284 7 12 7ZM12 14C11.1716 14 10.5 14.6716 10.5 15.5C10.5 16.3284 11.1716 17 12 17C12.8284 17 13.5 16.3284 13.5 15.5C13.5 14.6716 12.8284 14 12 14Z" />
</svg>
<span>Issues</span>
</a>
</div>
</div>
<div class="content-block" id="settings-block">
<div class="close-btn"></div>
<h3>Settings:</h3>
<div class="range-selector">
<label for="mesh-complexity">Mesh complexity</label>
<input id="mesh-complexity" type="range" min="1" max="7" step="1" value="3" />
</div>
<div class="range-selector">
<label for="interpolation-complexity">Smoothness <span style="opacity: 0.5;">(Interpolation)</span>
</label>
<input id="interpolation-complexity" type="range" min="0" max="400" step="100" value="50" />
</div>
<div class="checkbox-block">
<input id="show-original-box-btn" type="checkbox" />
<label for="show-original-box-btn">Show original box</label>
</div>
</div>
<div class="action-buttons">
<button id="show-info" class="secondary-btn active">
i
</button>
<button id="show-settings" class="secondary-btn active">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" stroke="none">
<path
d="M9 3C7.13616 3 5.57006 4.27477 5.12602 6L2 6V8H5.12602C5.57006 9.72523 7.13616 11 9 11C10.8638 11 12.4299 9.72523 12.874 8H22V6L12.874 6C12.4299 4.27477 10.8638 3 9 3ZM7 7C7 8.10457 7.89543 9 9 9C10.1046 9 11 8.10457 11 7C11 5.89543 10.1046 5 9 5C7.89543 5 7 5.89543 7 7Z M11.126 18H2V16H11.126C11.5701 14.2748 13.1362 13 15 13C16.8638 13 18.4299 14.2748 18.874 16H22V18H18.874C18.4299 19.7252 16.8638 21 15 21C13.1362 21 11.5701 19.7252 11.126 18ZM15 19C13.8954 19 13 18.1046 13 17C13 15.8954 13.8954 15 15 15C16.1046 15 17 15.8954 17 17C17 18.1046 16.1046 19 15 19Z" />
</svg>
</button>
<button id="load-svg-btn" type="file" multiple="false" accept="image/svg" class="secondary-btn">
Load SVG
</button>
<input id="load-svg-input" type="file" value="upload" />
<button id="save-result-btn" class="primary-btn">
Save Result
</button>
</div>
</div>
<div id="scale-wrap">
<div id="svg-container" style="width: 500px; height: 500px;">
<svg id="svg-control">
<path id="control-path" />
</svg>
<svg id="svg-element"></svg>
</div>
</div>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-132685793-3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-132685793-3');
</script>
<script type="text/javascript" src="dist/js/app.js"></script></body>
</html>