forked from sparkbox/logo-experiments
-
Notifications
You must be signed in to change notification settings - Fork 0
/
svg.html
70 lines (68 loc) · 5.22 KB
/
svg.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG Logo</title>
<link rel="stylesheet" href="all.css">
<style>
.container {
max-width: 300px;
margin: 0 auto;
}
.logo--icon-box {
fill: #75c5d5;
}
.logo--icon {
fill: #ffffff;
}
.svg-form p {
text-align: center;
}
.fg-label, .bg-label {
display: none;
}
.svg-form input {
cursor: pointer;
width: 5em;
height: 3em;
}
</style>
</head>
<body>
<h1 class="title">SVG Logo</h1>
<!-- todo: Maybe add form elements for manipulating color, etc. -->
<div class="container">
<svg class="svg-logo" width="100%" viewBox="0 0 62 62" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Sparkbox</title>
<defs></defs>
<g class="logo--group">
<path class="logo--path logo--icon-box" id="logo-bg" d="M59.6826281,62.0159208 L2.33230924,62.0159208 C1.04936705,62.0159208 0,60.966062 0,59.6831198 L0,2.33280098 C0,1.04985879 1.04936705,0 2.33230924,0 L59.6826281,0 C60.9655703,0 62.0154291,1.04985879 62.0154291,2.33280098 L62.0154291,59.6831198 C62.0154291,60.966062 60.9655703,62.0159208 59.6826281,62.0159208 Z"></path>
<path class="logo--path logo--icon" id="logo-fg" d="M50.0860164,29.7111781 L17.3574677,29.7111781 L37.8019309,15.9209018 L31.5770305,26.4853825 C31.5539189,26.5320975 31.5367081,26.5842216 31.5367081,26.6427384 C31.5367081,26.8232059 31.6837375,26.9697436 31.866172,26.9697436 L31.866172,26.970727 L34.339118,26.970727 L34.339118,26.9682683 L40.2119347,26.9682683 C40.2473397,26.9697436 40.2793026,26.970727 40.312249,26.970727 C43.466251,26.970727 46.0223007,24.4136939 46.0223007,21.2611671 C46.0223007,18.3550006 43.8502977,15.9553234 41.0424787,15.5973388 L45.2133931,8.51288183 C45.2522403,8.45780727 45.2724015,8.39535666 45.2724015,8.32848041 C45.2724015,8.1470294 45.1253721,8 44.9449046,8 C44.8750779,8 44.8111521,8.02163643 44.759028,8.05950019 L44.759028,8.05802498 L40.9033171,10.6588227 L40.9008584,10.6642318 L33.6472439,15.5540659 L17.0599668,15.5540659 C16.8858918,15.5540659 16.7423046,15.6917523 16.733945,15.866319 L16.733945,26.9638427 L9.66571542,31.731726 C9.56736799,31.7902427 9.5,31.894491 9.5,32.0154583 C9.5,32.1954341 9.64850462,32.3409883 9.83044736,32.3409883 L13.4545501,32.3409883 L13.4629096,32.3365627 L42.5653886,32.3365627 L23.6718643,45.0799306 L29.2555395,35.5987468 C29.2924198,35.5397384 29.3179901,35.4802382 29.3179901,35.4074611 C29.3179901,35.2294522 29.1793202,35.0838981 29.0027866,35.0799642 L17.0609502,35.0799642 C16.8814662,35.0799642 16.733945,35.2250266 16.733945,35.4074611 L16.733945,46.1691283 C16.733945,46.3466455 16.8775323,46.4902327 17.0555411,46.4921996 L19.7900913,46.4921996 L16.2628609,52.4859836 C16.2274558,52.5381078 16.2068028,52.5980997 16.2068028,52.6684181 C16.2068028,52.8479021 16.3548157,52.9964068 16.5347915,52.9964068 C16.6065851,52.9964068 16.6705109,52.9713282 16.7250938,52.9349396 L26.2677446,46.497117 L40.312249,46.497117 C43.466251,46.497117 46.0223007,43.9410674 46.0223007,40.7885406 C46.0223007,38.423285 44.584953,36.3914271 42.5334257,35.5259697 L50.2379632,30.3307669 C50.3436866,30.2761841 50.414005,30.1665267 50.414005,30.0391668 C50.414005,29.8582075 50.2684509,29.7111781 50.0860164,29.7111781 L50.0860164,29.7111781 Z M40.2817613,18.1819092 C40.2906126,18.1819092 40.3043812,18.180434 40.312249,18.180434 C42.0151347,18.180434 43.3944574,19.5587732 43.3944574,21.2611671 C43.3944574,22.9635611 42.0151347,24.3428838 40.312249,24.3428838 C40.3043812,24.3428838 40.2906126,24.3419003 40.2817613,24.3419003 L35.8861231,24.3428838 L39.519077,18.1819092 L40.2817613,18.1819092 L40.2817613,18.1819092 Z M19.3608048,18.180434 L29.7566196,18.180434 L19.3608048,25.1901469 L19.3608048,18.180434 L19.3608048,18.180434 Z M19.3608048,43.8682903 L19.3608048,37.7063322 L24.9680834,37.7063322 L21.3380798,43.8682903 L19.3608048,43.8682903 L19.3608048,43.8682903 Z M43.3944574,40.7885406 C43.3944574,42.4874924 42.0151347,43.8682903 40.312249,43.8682903 L30.1667284,43.8682903 L39.2997623,37.7082992 L40.312249,37.7082992 C42.0151347,37.7082992 43.3944574,39.0866384 43.3944574,40.7885406 L43.3944574,40.7885406 Z"></path>
</g>
</svg>
<form class="svg-form" name="interactive-svg-form">
<p>
<label class="fg-label" for="fg-color">Foreground Color:</label>
<input type="color" id="fg-color" value="#FFFFFF">
<label class="bg-label" for="bg-color">Background Color:</label>
<input type="color" id="bg-color" value="#75c5d5">
</p>
</form>
</div>
<script>
// Add events for detcting color changes and updating the logo.
document.addEventListener("DOMContentLoaded", function(event) {
var fgColorEl = document.getElementById('fg-color');
fgColorEl.onchange = function updateFgColor(event) {
var color = event.target.value;
document.getElementById('logo-fg').style.fill = color;
};
var bgColorEl = document.getElementById('bg-color');
bgColorEl.onchange = function updateBgColor(event) {
var color = event.target.value;
document.getElementById('logo-bg').style.fill = color;
};
});
</script>
</body>
</html>