/
single.html
81 lines (80 loc) · 6.35 KB
/
single.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>datascope logo generator</title>
<!-- <link rel="stylesheet" href="style.css"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="dat.gui.min.js"></script>
<script type="text/javascript" src="paperjs-v0.10.2/paper-full.js"></script>
<script type="text/paperscript" src="bcard-style.js" canvas="myCanvas"></script>
<style>
.row {padding-top: 15px};
</style>
</head>
<body>
<div class="container">
<div class="row">
<canvas id="myCanvas"></canvas>
</div>
<div class="row">
<button id="downloadButton">Download SVG</button>
<button id="regenButton">Regenerate</button>
</div>
<div class="row">
<span id="colorText">Click to change color:</span>
</div>
<div class="row">
<label><input id="invertButton" type="checkbox"> Invert color</label>
</div>
</div>
<!-- SVG of text, generated by Illustrator. Hidden from view by
inline style. -->
<svg style="left: -9999px; position: absolute;" version="1.1" id="logotype" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="470.277px" height="141.65px" viewBox="0 0 470.277 141.65" enable-background="new 0 0 470.277 141.65"
xml:space="preserve">
<g>
<path fill="#141414" d="M53.687,78.848c-2.971,5.736-8.707,8.195-13.623,8.195c-9.322,0-15.059-7.99-15.059-16.596
c0-8.094,4.916-16.902,15.263-16.902c4.815,0,9.835,2.049,13.419,6.658V78.848z M66.185,19.842H53.687v29.502
c-4.097-4.506-10.346-6.658-15.775-6.658c-15.16,0-25.507,13.01-25.507,27.455c0,15.365,10.757,27.76,25.303,27.76
c5.839,0,12.702-2.254,16.492-7.99l0.614,6.762h11.371V19.842z"/>
<path fill="#141414" d="M103.347,83.457c-3.586,3.072-7.377,5.225-11.986,5.225c-4.814,0-9.014-2.357-9.014-7.684
c0-6.863,7.068-8.707,12.906-8.707c2.356,0,4.918,0.307,8.094,1.023V83.457z M115.742,96.672V64.812
c0-13.727-6.453-22.127-21.41-22.127c-7.58,0-15.673,2.152-21.922,5.225l3.381,9.322c4.508-2.355,10.346-4.609,16.287-4.609
c8.094,0,11.27,4.303,11.27,11.473v1.229c-3.894-0.818-7.172-1.125-9.938-1.125c-11.166,0-23.254,4.096-23.254,17.209
c0,11.062,9.117,16.492,18.951,16.492c6.045,0,11.166-1.639,14.957-6.146l0.614,4.918H115.742z"/>
<path fill="#141414" d="M151.281,54.363V43.916h-13.932V31.828h-11.166l-1.332,12.088h-6.557v10.447h6.557v23.664
c0,3.482,0.308,6.967,1.332,9.732c2.049,6.043,7.17,10.039,15.059,10.039c3.893,0,8.399-1.025,11.473-2.768l-3.688-9.424
c-1.742,0.922-3.586,1.436-5.84,1.436c-3.893,0-5.326-2.357-5.736-6.455c-0.102-1.639-0.102-2.867-0.102-4.404v-21.82H151.281z"/>
<path fill="#141414" d="M187.782,83.457c-3.585,3.072-7.376,5.225-11.985,5.225c-4.814,0-9.014-2.357-9.014-7.684
c0-6.863,7.067-8.707,12.906-8.707c2.356,0,4.918,0.307,8.093,1.023V83.457z M200.177,96.672V64.812
c0-13.727-6.454-22.127-21.41-22.127c-7.58,0-15.673,2.152-21.922,5.225l3.381,9.322c4.508-2.355,10.346-4.609,16.287-4.609
c8.094,0,11.269,4.303,11.269,11.473v1.229c-3.893-0.818-7.171-1.125-9.937-1.125c-11.166,0-23.254,4.096-23.254,17.209
c0,11.062,9.117,16.492,18.951,16.492c6.045,0,11.166-1.639,14.957-6.146l0.614,4.918H200.177z"/>
<path fill="#141414" d="M242.501,49.141c-4.61-4.303-10.859-6.455-17.415-6.455c-9.321,0-18.132,5.225-18.132,15.98
c0,9.426,7.99,13.01,14.239,15.57c4.712,1.947,9.834,3.996,9.834,7.684c0,4.199-4.098,6.045-7.888,6.045
c-4.712,0-8.297-2.152-12.088-5.941l-7.58,7.17c5.121,5.635,12.189,8.707,19.975,8.707c10.244,0,19.873-5.121,19.873-16.799
c0-9.732-8.604-13.318-15.365-15.98c-4.712-1.947-9.117-3.791-9.117-7.377c0-3.176,2.664-5.121,6.249-5.121
c3.893,0,7.888,1.844,10.448,4.098L242.501,49.141z"/>
<path fill="#141414" d="M284.314,83.148c-2.971,2.562-6.761,3.895-10.551,3.895c-8.195,0-15.059-6.967-15.059-16.801
c0-9.219,6.556-16.697,15.161-16.697c3.893,0,7.478,1.434,10.448,3.994l6.146-9.219c-4.712-3.586-10.551-5.635-17.005-5.635
c-15.878,0-27.351,12.191-27.351,27.557c0,16.492,11.473,27.658,26.839,27.658c7.067,0,13.214-1.945,17.824-5.941L284.314,83.148z"
/>
<path fill="#141414" d="M329.625,70.242c0,9.322-6.146,16.801-14.751,16.801s-14.751-7.479-14.751-16.801
c0-9.219,6.146-16.697,14.751-16.697S329.625,61.023,329.625,70.242z M314.875,42.686c-15.775,0-27.351,12.191-27.351,27.557
c0,15.469,11.575,27.658,27.351,27.658s27.352-12.189,27.352-27.658C342.226,54.877,330.65,42.686,314.875,42.686z"/>
<path fill="#141414" d="M358.235,61.74c2.971-5.736,8.707-8.195,13.727-8.195c9.22,0,15.059,7.99,15.059,16.596
c0,8.092-4.917,16.902-15.264,16.902c-4.917,0-9.937-2.049-13.521-6.66V61.74z M345.839,43.916v78.365h12.396V91.344
c4.098,4.508,10.346,6.557,15.878,6.557c15.059,0,25.507-13.01,25.507-27.453c0-15.469-10.858-27.762-25.302-27.762
c-5.84,0-12.806,2.357-16.493,7.99l-0.717-6.76H345.839z"/>
<path fill="#141414" d="M442.293,64.506h-25.508c1.64-6.762,6.044-11.883,13.625-11.883
C436.966,52.623,441.986,57.643,442.293,64.506z M454.484,73.418c0.307-1.947,0.512-4.303,0.512-6.248
c0-14.137-10.551-24.484-24.893-24.484c-14.956,0-26.531,12.088-26.531,27.967c0,15.672,10.243,27.248,26.531,27.248
c10.961,0,17.824-4.098,23.663-12.703l-8.399-5.633c-3.278,5.531-7.684,8.195-14.547,8.195c-8.604,0-13.932-6.455-14.751-14.342
H454.484z"/>
</g>
</svg>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>