-
Notifications
You must be signed in to change notification settings - Fork 0
/
readyforwork.html
157 lines (144 loc) · 17.7 KB
/
readyforwork.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
---
layout: iframe
---
<div id="readyForWork" class="module container container-sm">
<input id="middleAmpersandSlider" type="range" min="0.00" max="1.00" value="0.50" step="0.01" >
<div class="ampersands">
<div class="bg-left">
<svg width="355" height="369" viewBox="0 0 355 369" fill="none" xmlns="http://www.w3.org/2000/svg">
<g style="mix-blend-mode:multiply">
<path d="M279.51 357.588C287.87 357.588 299.673 357.588 304.099 357.588C308.033 357.588 309.508 355.627 309.508 352.195C309.508 331.114 309.508 310.033 309.508 288.953" stroke="#0050FF" stroke-opacity="0.25" stroke-width="20"/>
</g>
<g style="mix-blend-mode:multiply">
<path d="M70 199.921C52.8887 212.439 41 232.916 41 262.479V287.482C41 314.63 51.7993 335.252 70 347.845" stroke="#0050FF" stroke-opacity="0.25" stroke-width="20" stroke-linecap="round"/>
</g>
<g style="mix-blend-mode:multiply">
<path d="M182.139 10C107.389 10 70.5063 43.337 70.5063 87.9499V97.7549C70.5063 115.836 73.4459 128.707 82.5249 145" stroke="#0050FF" stroke-opacity="0.25" stroke-width="20" stroke-linecap="round"/>
</g>
</svg>
</div>
<div class="bg-right">
<svg width="295" height="374" viewBox="0 0 295 374" fill="none" xmlns="http://www.w3.org/2000/svg">
<g style="mix-blend-mode:multiply">
<path d="M213.5 353.571C226.961 361.769 237.8 364 251.116 364C259.955 364 267.813 361.542 273.214 356.133C280.58 348.758 285 334.992 285 314.342C285 305.347 284.324 297.029 282.971 290" stroke="#0050FF" stroke-opacity="0.25" stroke-width="20" stroke-linecap="round"/>
</g>
<g style="mix-blend-mode:multiply">
<path d="M92.5 363.508C45.8482 363.508 10 328.108 10 275.992V273.533C10 247.773 17.8187 228.356 30.2778 215" stroke="#0050FF" stroke-opacity="0.25" stroke-width="20" stroke-linecap="round"/>
</g>
<g style="mix-blend-mode:multiply">
<path d="M160.268 10C93.9732 10 47.8125 61.625 47.8125 99.975V102.925" stroke="#0050FF" stroke-opacity="0.25" stroke-width="20" stroke-linecap="round"/>
</g>
</svg>
</div>
<div class="ampersand-left">
&
</div>
<div class="ampersand-right">
&
</div>
<div id="ampersandMiddle">
&
</div>
<div class="ampersand-text-left">
<b>Linear</b>
<br>1. Rationalized construction
<br>2. Smooth counters
<br>3. 20-unit terminal cuts
<br>4. 20-unit inktraps
<br>5. Flattened sides
<br>6. Simple diagonals
<br>7. Squared strokes
</div>
<div class="ampersand-text-right">
<b>Casual</b>
<br>1. Brush-based construction
<br>2. Kinked counters
<br>3. 6-unit inktraps & terminals
<br>4. 6-unit inktraps & terminals
<br>5. Organic curves
<br>6. Curved diagonals
<br>7. Softened strokes
</div>
<div class="bg-left" style="top:-35px">
<svg width="355" height="354" viewBox="0 0 355 354" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M60 24C66.6274 24 72 18.6274 72 12C72 5.37258 66.6274 0 60 0C53.3726 0 48 5.37258 48 12C48 18.6274 53.3726 24 60 24Z" fill="#0050FF"/>
<path d="M56.8079 15.905V16.835C56.8079 16.88 56.8229 16.925 56.8529 16.955C56.8829 16.985 56.9279 17 56.9729 17H63.6479V16.07C63.6479 15.965 63.5879 15.905 63.4829 15.905H61.1129V6.515C61.1129 6.41 61.0529 6.35 60.9479 6.35H59.7779C59.3879 6.71 58.8629 7.175 58.3979 7.58C57.9179 8 57.4529 8.405 56.9879 8.825V9.845C56.9879 9.965 57.0179 10.025 57.1079 10.025C57.2279 10.025 57.6479 9.665 58.3979 9.005C59.0429 8.405 59.3429 8.105 59.7329 7.52H59.9429V15.905H56.8079Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M166 97C172.627 97 178 91.6274 178 85C178 78.3726 172.627 73 166 73C159.373 73 154 78.3726 154 85C154 91.6274 159.373 97 166 97Z" fill="#0050FF"/>
<path d="M165.988 79.2C164.533 79.2 163.468 79.665 162.898 80.205C162.808 80.295 162.778 80.34 162.778 80.46V81.45H163.003C163.843 80.655 164.743 80.325 165.883 80.325C166.903 80.325 167.473 80.49 167.773 80.82C168.013 81.075 168.148 81.405 168.148 81.84V81.99C168.148 82.89 167.878 83.31 165.808 84.66C163.453 86.19 162.508 87.195 162.508 89.115V89.835C162.508 89.94 162.568 90 162.673 90H169.528V89.07C169.528 88.965 169.468 88.905 169.363 88.905H165.718C164.788 88.905 164.278 88.965 163.798 89.085H163.648C163.708 87.615 164.233 87.03 166.498 85.53C168.703 84.105 169.303 83.475 169.303 82.005V81.69C169.303 80.175 168.238 79.2 165.988 79.2Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M276 96C282.627 96 288 90.6274 288 84C288 77.3726 282.627 72 276 72C269.373 72 264 77.3726 264 84C264 90.6274 269.373 96 276 96Z" fill="#0050FF"/>
<path d="M275.823 78.2C274.413 78.2 273.318 78.62 272.823 79.04C272.763 79.085 272.748 79.115 272.748 79.205V80.195H272.958C273.873 79.58 274.578 79.325 275.793 79.325C277.338 79.325 278.133 80.015 278.133 80.975V81.14C278.133 82.31 277.023 83.12 274.008 83.12V84.035C274.008 84.14 274.068 84.2 274.173 84.2C276.843 84.2 278.268 84.83 278.268 86.165V86.375C278.268 87.545 277.278 88.175 275.733 88.175C274.413 88.175 273.663 87.935 272.778 87.26H272.553V88.295C272.553 88.4 272.583 88.445 272.673 88.52C273.138 88.94 274.263 89.3 275.748 89.3C278.148 89.3 279.468 88.1 279.468 86.51V86.135C279.468 85.1 278.823 84.125 276.948 83.75V83.525C278.658 83.12 279.318 82.205 279.318 81.065V80.735C279.318 79.355 278.148 78.2 275.823 78.2Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M68 170C74.6274 170 80 164.627 80 158C80 151.373 74.6274 146 68 146C61.3726 146 56 151.373 56 158C56 164.627 61.3726 170 68 170Z" fill="#0050FF"/>
<path d="M69.6529 157.075C69.6379 157.705 69.5629 158.815 69.5179 159.625H68.5279C67.2979 159.625 66.4129 159.655 65.4829 159.805V159.595C66.8929 157.33 68.3179 155.035 69.7729 152.71V152.5H68.7529C68.6629 152.5 68.5429 152.515 68.4679 152.635C66.7729 155.44 64.2679 159.595 64.2679 159.625V160.51C64.2679 160.615 64.3279 160.675 64.4329 160.675H69.5179V162.835C69.5179 162.94 69.5779 163 69.6829 163H70.6729V160.675H71.9029V159.79C71.9029 159.685 71.8429 159.625 71.7379 159.625H70.6729V157.24C70.6729 157.135 70.6129 157.075 70.5079 157.075H69.6529Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 271C18.6274 271 24 265.627 24 259C24 252.373 18.6274 247 12 247C5.37258 247 0 252.373 0 259C0 265.627 5.37258 271 12 271Z" fill="#0050FF"/>
<path d="M9.36293 253.5C9.16793 255.285 8.86793 258.165 8.76293 259.02C8.74793 259.17 8.80793 259.23 8.91293 259.23H9.87293C10.5779 258.945 11.3429 258.78 12.1529 258.78C13.6979 258.78 14.3129 259.485 14.3129 260.715V261.09C14.3129 262.38 13.4429 263.175 11.8379 263.175C10.5479 263.175 9.73793 262.92 8.85293 262.26H8.64293V263.325C8.64293 263.4 8.64293 263.43 8.70293 263.475C9.22793 263.955 10.3979 264.3 11.8379 264.3C14.1479 264.3 15.4679 263.01 15.4679 261.21V260.52C15.4679 258.765 14.4179 257.775 12.4229 257.775C11.5079 257.775 10.8179 257.925 10.2029 258.255H9.96293C10.0829 257.16 10.2479 255.72 10.3529 254.73C10.3679 254.67 10.3679 254.595 10.3829 254.535H15.0779V253.665C15.0779 253.56 15.0179 253.5 14.9129 253.5H9.36293Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M343 354C349.627 354 355 348.627 355 342C355 335.373 349.627 330 343 330C336.373 330 331 335.373 331 342C331 348.627 336.373 354 343 354Z" fill="#0050FF"/>
<path d="M342.868 347C343.633 345.11 344.293 343.475 344.878 342.035C345.868 339.575 346.648 337.625 346.648 337.535V336.665C346.648 336.56 346.588 336.5 346.483 336.5H339.583V339.455C339.583 339.56 339.643 339.62 339.748 339.62H340.738V337.595H343.183C343.858 337.595 344.608 337.58 345.478 337.535V337.85C344.773 339.215 344.263 340.385 343.798 341.54C342.118 345.68 341.698 346.7 341.698 346.85C341.698 346.955 341.758 347.015 341.863 347.015C342.028 347 342.703 347 342.868 347Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M175 214C181.627 214 187 208.627 187 202C187 195.373 181.627 190 175 190C168.373 190 163 195.373 163 202C163 208.627 168.373 214 175 214Z" fill="#0050FF"/>
<path d="M175.573 196.2C173.278 196.2 171.523 197.58 171.523 200.715V202.92C171.523 205.905 172.663 207.3 175.093 207.3C177.148 207.3 178.528 206.025 178.528 204.225V203.31C178.528 201.57 177.298 200.58 175.348 200.58C174.298 200.58 173.533 200.88 172.918 201.435H172.708V200.58C172.708 199.41 172.948 198.525 173.503 197.985C173.968 197.52 174.568 197.28 175.453 197.28C176.413 197.28 177.103 197.505 177.883 198.045H178.093V197.085C178.093 196.965 178.078 196.92 177.988 196.86C177.583 196.515 176.698 196.2 175.573 196.2ZM173.428 205.74C172.933 205.23 172.708 204.36 172.708 202.95V202.485C173.443 201.9 174.208 201.645 175.123 201.645C176.008 201.645 176.593 201.855 176.953 202.23C177.238 202.515 177.388 202.935 177.388 203.655V204.03C177.388 205.545 176.518 206.28 175.033 206.28C174.328 206.28 173.803 206.115 173.428 205.74Z" fill="white"/>
</svg>
</div>
<div class="bg-right" style="top:-35px">
<svg width="360" height="350" viewBox="0 0 360 350" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M78 24C84.6274 24 90 18.6274 90 12C90 5.37258 84.6274 0 78 0C71.3726 0 66 5.37258 66 12C66 18.6274 71.3726 24 78 24Z" fill="#0050FF"/>
<path d="M74.8079 15.905V16.835C74.8079 16.88 74.8229 16.925 74.8529 16.955C74.8829 16.985 74.9279 17 74.9729 17H81.6479V16.07C81.6479 15.965 81.5879 15.905 81.4829 15.905H79.1129V6.515C79.1129 6.41 79.0529 6.35 78.9479 6.35H77.7779C77.3879 6.71 76.8629 7.175 76.3979 7.58C75.9179 8 75.4529 8.405 74.9879 8.825V9.845C74.9879 9.965 75.0179 10.025 75.1079 10.025C75.2279 10.025 75.6479 9.665 76.3979 9.005C77.0429 8.405 77.3429 8.105 77.7329 7.52H77.9429V15.905H74.8079Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M172 102C178.627 102 184 96.6274 184 90C184 83.3726 178.627 78 172 78C165.373 78 160 83.3726 160 90C160 96.6274 165.373 102 172 102Z" fill="#0050FF"/>
<path d="M171.988 84.2C170.533 84.2 169.468 84.665 168.898 85.205C168.808 85.295 168.778 85.34 168.778 85.46V86.45H169.003C169.843 85.655 170.743 85.325 171.883 85.325C172.903 85.325 173.473 85.49 173.773 85.82C174.013 86.075 174.148 86.405 174.148 86.84V86.99C174.148 87.89 173.878 88.31 171.808 89.66C169.453 91.19 168.508 92.195 168.508 94.115V94.835C168.508 94.94 168.568 95 168.673 95H175.528V94.07C175.528 93.965 175.468 93.905 175.363 93.905H171.718C170.788 93.905 170.278 93.965 169.798 94.085H169.648C169.708 92.615 170.233 92.03 172.498 90.53C174.703 89.105 175.303 88.475 175.303 87.005V86.69C175.303 85.175 174.238 84.2 171.988 84.2Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M300 96C306.627 96 312 90.6274 312 84C312 77.3726 306.627 72 300 72C293.373 72 288 77.3726 288 84C288 90.6274 293.373 96 300 96Z" fill="#0050FF"/>
<path d="M299.823 78.2C298.413 78.2 297.318 78.62 296.823 79.04C296.763 79.085 296.748 79.115 296.748 79.205V80.195H296.958C297.873 79.58 298.578 79.325 299.793 79.325C301.338 79.325 302.133 80.015 302.133 80.975V81.14C302.133 82.31 301.023 83.12 298.008 83.12V84.035C298.008 84.14 298.068 84.2 298.173 84.2C300.843 84.2 302.268 84.83 302.268 86.165V86.375C302.268 87.545 301.278 88.175 299.733 88.175C298.413 88.175 297.663 87.935 296.778 87.26H296.553V88.295C296.553 88.4 296.583 88.445 296.673 88.52C297.138 88.94 298.263 89.3 299.748 89.3C302.148 89.3 303.468 88.1 303.468 86.51V86.135C303.468 85.1 302.823 84.125 300.948 83.75V83.525C302.658 83.12 303.318 82.205 303.318 81.065V80.735C303.318 79.355 302.148 78.2 299.823 78.2Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M78 174C84.6274 174 90 168.627 90 162C90 155.373 84.6274 150 78 150C71.3726 150 66 155.373 66 162C66 168.627 71.3726 174 78 174Z" fill="#0050FF"/>
<path d="M79.6529 161.075C79.6379 161.705 79.5629 162.815 79.5179 163.625H78.5279C77.2979 163.625 76.4129 163.655 75.4829 163.805V163.595C76.8929 161.33 78.3179 159.035 79.7729 156.71V156.5H78.7529C78.6629 156.5 78.5429 156.515 78.4679 156.635C76.7729 159.44 74.2679 163.595 74.2679 163.625V164.51C74.2679 164.615 74.3279 164.675 74.4329 164.675H79.5179V166.835C79.5179 166.94 79.5779 167 79.6829 167H80.6729V164.675H81.9029V163.79C81.9029 163.685 81.8429 163.625 81.7379 163.625H80.6729V161.24C80.6729 161.135 80.6129 161.075 80.5079 161.075H79.6529Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 271C18.6274 271 24 265.627 24 259C24 252.373 18.6274 247 12 247C5.37258 247 0 252.373 0 259C0 265.627 5.37258 271 12 271Z" fill="#0050FF"/>
<path d="M9.36293 253.5C9.16793 255.285 8.86793 258.165 8.76293 259.02C8.74793 259.17 8.80793 259.23 8.91293 259.23H9.87293C10.5779 258.945 11.3429 258.78 12.1529 258.78C13.6979 258.78 14.3129 259.485 14.3129 260.715V261.09C14.3129 262.38 13.4429 263.175 11.8379 263.175C10.5479 263.175 9.73793 262.92 8.85293 262.26H8.64293V263.325C8.64293 263.4 8.64293 263.43 8.70293 263.475C9.22793 263.955 10.3979 264.3 11.8379 264.3C14.1479 264.3 15.4679 263.01 15.4679 261.21V260.52C15.4679 258.765 14.4179 257.775 12.4229 257.775C11.5079 257.775 10.8179 257.925 10.2029 258.255H9.96293C10.0829 257.16 10.2479 255.72 10.3529 254.73C10.3679 254.67 10.3679 254.595 10.3829 254.535H15.0779V253.665C15.0779 253.56 15.0179 253.5 14.9129 253.5H9.36293Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M172 223C178.627 223 184 217.627 184 211C184 204.373 178.627 199 172 199C165.373 199 160 204.373 160 211C160 217.627 165.373 223 172 223Z" fill="#0050FF"/>
<path d="M172.573 205.2C170.278 205.2 168.523 206.58 168.523 209.715V211.92C168.523 214.905 169.663 216.3 172.093 216.3C174.148 216.3 175.528 215.025 175.528 213.225V212.31C175.528 210.57 174.298 209.58 172.348 209.58C171.298 209.58 170.533 209.88 169.918 210.435H169.708V209.58C169.708 208.41 169.948 207.525 170.503 206.985C170.968 206.52 171.568 206.28 172.453 206.28C173.413 206.28 174.103 206.505 174.883 207.045H175.093V206.085C175.093 205.965 175.078 205.92 174.988 205.86C174.583 205.515 173.698 205.2 172.573 205.2ZM170.428 214.74C169.933 214.23 169.708 213.36 169.708 211.95V211.485C170.443 210.9 171.208 210.645 172.123 210.645C173.008 210.645 173.593 210.855 173.953 211.23C174.238 211.515 174.388 211.935 174.388 212.655V213.03C174.388 214.545 173.518 215.28 172.033 215.28C171.328 215.28 170.803 215.115 170.428 214.74Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M348 350C354.627 350 360 344.627 360 338C360 331.373 354.627 326 348 326C341.373 326 336 331.373 336 338C336 344.627 341.373 350 348 350Z" fill="#0050FF"/>
<path d="M347.868 343C348.633 341.11 349.293 339.475 349.878 338.035C350.868 335.575 351.648 333.625 351.648 333.535V332.665C351.648 332.56 351.588 332.5 351.483 332.5H344.583V335.455C344.583 335.56 344.643 335.62 344.748 335.62H345.738V333.595H348.183C348.858 333.595 349.608 333.58 350.478 333.535V333.85C349.773 335.215 349.263 336.385 348.798 337.54C347.118 341.68 346.698 342.7 346.698 342.85C346.698 342.955 346.758 343.015 346.863 343.015C347.028 343 347.703 343 347.868 343Z" fill="white"/>
</svg>
</div>
</div>
<div class="slider-group clearfix">
<div class="slider-label d-inline-block text-right float-left">Linear<span> 0</span></div>
<div class="slidecontainer float-left">
<input type="range" min="0.00" max="1.00" value="0.30" step="0.01" class="slider" id="ampersandSlider">
<output id="ampersandOutput"></output>
</div>
<div class="slider-label d-inline-block float-left"><span>1 </span>Casual</div>
</div>
</div>
<script type="text/javascript">
let ampersandSlider = document.getElementById('ampersandSlider'),
o = document.getElementById('ampersandOutput'),
amp = document.getElementById("ampersandMiddle"),
ampSlider = document.getElementById("middleAmpersandSlider");
dragging = false;
o.innerHTML = ampersandSlider.value;
ampersandSlider.addEventListener('input', function () {
o.innerHTML = ampersandSlider.value;
o.style.left = ampersandSlider.value*100 + "%";
amp.style.left = ampersandSlider.value*100 + "%";
amp.style.fontVariationSettings = "'CASL' " + ampersandSlider.value;
if (ampersandSlider.value == 0){
document.getElementById("readyForWork").classList.add("linear");
} else if (ampersandSlider.value == 1){
document.getElementById("readyForWork").classList.toggle("casual");
} else {
document.getElementById("readyForWork").classList.remove("casual");
document.getElementById("readyForWork").classList.remove("linear");
}
}, false);
ampSlider.addEventListener('input', function () {
ampersandSlider.value = this.value;
o.innerHTML = ampersandSlider.value;
o.style.left = ampersandSlider.value*100 + "%";
amp.style.left = ampersandSlider.value*100 + "%";
amp.style.fontVariationSettings = "'CASL' " + ampersandSlider.value;
if (ampersandSlider.value == 0){
document.getElementById("readyForWork").classList.add("linear");
} else if (ampersandSlider.value == 1){
document.getElementById("readyForWork").classList.toggle("casual");
} else {
document.getElementById("readyForWork").classList.remove("casual");
document.getElementById("readyForWork").classList.remove("linear");
}
}, false);
</script>