├── .gitlab-ci.yml
├── LICENSE
├── README.md
├── favicon.ico
└── index.html


/.gitlab-ci.yml:
--------------------------------------------------------------------------------
 1 | # This file is a template, and might need editing before it works on your project.
 2 | # Full project: https://gitlab.com/pages/plain-html
 3 | pages:
 4 |   stage: deploy
 5 |   script:
 6 |   - mkdir .public
 7 |   - cp -r * .public
 8 |   - mv .public public
 9 |   artifacts:
10 |     paths:
11 |     - public
12 |   only:
13 |   - master
14 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018, 2020 Cris Stringfellow & The Dosyago Corporation
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # dosylogo
 2 | 
 3 | There are logos here for EVERYTHING I'm ever gonna need. Seriously. 
 4 | 
 5 | Ooo YEAH :p ;) xxx
 6 | 
 7 | ## License
 8 | 
 9 | The code and the logos are MIT licensed. 
10 | 
11 | ## To Do
12 | 
13 | Make it fluid, rather than angular. That would be better. So fuzz on things like arcs or curves.
14 | 


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/o0101/logos/50fa4c01329728afd755358c60aaa3fed6b23e1e/favicon.ico


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <title>DOSY LOGOS</title>
  2 | <style>
  3 | 	svg text {
  4 | 		font: 10rem monospace;
  5 | 		fill: black;
  6 | 		opacity: 0;
  7 | 	}
  8 | 	svg {
  9 | 		position: relative;
 10 | 		fill: transparent;
 11 | 		stroke-linecap: round;
 12 | 		stroke-linejoin: round;
 13 | 		stroke: black;
 14 | 		display: inline-block;
 15 | 		width: 100px;
 16 | 		height: 100px;
 17 | 		outline: 0;
 18 | 		-webkit-user-select: none;
 19 | 	}
 20 | 	main.filled svg {
 21 | 		fill: black;
 22 | 		stroke-width: 4px;
 23 | 	}
 24 | 	/**
 25 | 	main.alt.filled svg path:nth-of-type(2n+1) {
 26 | 		fill: red;
 27 | 		stroke: transparent;
 28 | 	}
 29 | 	**/
 30 | 	main.alt.filled svg path:nth-of-type(2n) {
 31 | 		fill: red;
 32 | 		stroke: transparent;
 33 | 	}
 34 | 	svg path:nth-of-type(2) {
 35 | 		transform: rotate(120deg);
 36 | 		transform-origin: 333px 333px;
 37 | 	}
 38 | 	svg path:nth-of-type(3) {
 39 | 		transform: rotate(240deg);
 40 | 		transform-origin: 333px 333px;
 41 | 	}
 42 | 	svg:hover, 
 43 | 	svg:active,
 44 | 	svg:focus {
 45 | 		stroke: blue;		
 46 | 		stroke-width: 4px;
 47 | 	}
 48 | 	svg:hover text, 
 49 | 	svg:active text,
 50 | 	svg:focus text{
 51 | 		opacity: 1.0;
 52 | 	}
 53 | 	main.filled svg:focus,
 54 | 	main.filled svg:hover,
 55 | 	main.filled svg:active {
 56 | 		fill: blue;
 57 | 	}
 58 | 	aside.overlay {
 59 | 		position: absolute;
 60 | 		position: fixed;
 61 | 		z-index: 3;
 62 | 		display: none;
 63 | 		flex-direction: column;
 64 | 		top: 0;
 65 | 		right: 0;
 66 | 		bottom: 0;
 67 | 		left: 0;
 68 | 		width: 100%;
 69 | 		height: 100%;
 70 | 		align-items: center;
 71 | 		justify-content: center;
 72 | 		background: white;
 73 | 	}
 74 | 	.overlay svg {
 75 | 		width: 80vmin;
 76 | 		height: 80vmin;
 77 | 		stroke-width: 1rem;
 78 | 	}
 79 | 	.overlay svg text {
 80 | 		display: none;	
 81 | 	}
 82 | 	h1.name {
 83 | 		font-family: sans-serif;
 84 | 		font-size: 15vmin;
 85 | 		margin-top: -5vmin;
 86 | 	}
 87 | </style>
 88 | <aside class=overlay></aside>
 89 | <main class=lines></main>
 90 | <main class=filled></main>
 91 | <hr>
 92 | <main class="alt filled"></main>
 93 | <script>
 94 | 	const Cmds = "Mllmlllllmlll";
 95 | 	const t = (commands, skipIndex = -1) => {
 96 |  		let coords = [333, 333, 0, -100, 86.6, -50, -86.6, 50, -86.6, -50, 86.6, -50, 86.6, 50, 0, 100, -86.6, 50, -86.6, -50, 0, -100, -86.6, 50, 0, 100];
 97 | 		return `
 98 | 			<path d="
 99 | 				${commands.split('').map((c, i) => {
100 | 					if ( skipIndex >= 0 && i == skipIndex ) {
101 | 						coords.shift(); coords.shift();
102 | 						return;
103 | 					};
104 | 					return `
105 | 						${c} ${coords.shift()} ${coords.shift()}
106 | 					`;
107 | 				}).join(' ')}
108 | 			"/>
109 | 		`;
110 | 	};
111 | 	let id = 0;
112 | 	let attach;
113 | 	
114 | 	self.onload = () => {
115 | 		attach = document.querySelector('main.lines');
116 | 		natural();
117 | 		flipEach(Cmds);
118 | 		skipEach(Cmds);
119 | 		flip2(Cmds);
120 | 		flipSkip(Cmds);
121 | 		flip2(Cmds, true);
122 | 		flipSkip(Cmds, true);
123 | 		attach = document.querySelector('main.filled');
124 | 		natural();
125 | 		flipEach(Cmds);
126 | 		skipEach(Cmds);
127 | 		flip2(Cmds);
128 | 		flipSkip(Cmds);
129 | 		flip2(Cmds, true);
130 | 		flipSkip(Cmds, true);
131 | 		attach = document.querySelector('main.alt.filled');
132 | 		natural();
133 | 		flipEach(Cmds);
134 | 		skipEach(Cmds);
135 | 		flip2(Cmds);
136 | 		flipSkip(Cmds);
137 | 		flip2(Cmds, true);
138 | 		flipSkip(Cmds, true);
139 | 	};
140 | 
141 | 	function natural() {
142 | 		attach.insertAdjacentHTML('beforeEnd', 
143 | 			`<svg tabindex=1 width=666 height=666 viewbox="0 0 666 666">
144 | 				<text x=50 y=100>${id++}</text>
145 | 				${t(Cmds) + t(Cmds) + t(Cmds)}
146 | 			</svg>`
147 | 		);
148 | 	}
149 | 
150 | 	function flip2(In, destruct = false) {
151 | 		In.split('').forEach((c, i, X) => {
152 | 			let C = destruct ? X : Array.from(X);
153 | 			switch(c) {
154 | 				case "M":
155 | 					break;
156 | 				case "m":
157 | 					[i] = 'l';
158 | 					break;
159 | 				case "l":
160 | 					C[i] = 'm';
161 | 					break;
162 | 			};
163 | 			C = C.join('');
164 | 			flipEach(C, i);
165 | 		});
166 | 	}
167 | 
168 | 	function flipSkip(In, destruct = false) {
169 | 		In.split('').forEach((c, i, X) => {
170 | 			let C = destruct ? X : Array.from(X);
171 | 			switch(c) {
172 | 				case "M":
173 | 					break;
174 | 				case "m":
175 | 					[i] = 'l';
176 | 					break;
177 | 				case "l":
178 | 					C[i] = 'm';
179 | 					break;
180 | 			};
181 | 			C = C.join('');
182 | 			skipEach(C, i);
183 | 		});
184 | 	}
185 | 
186 | 	function flipEach(In, after) {
187 | 		In.split('').forEach((c, i, X) => {
188 | 			if ( after >= 0 && i <= after ) return;
189 | 			let C = Array.from(X);
190 | 			switch(c) {
191 | 				case "M":
192 | 					break;
193 | 				case "m":
194 | 					[i] = 'l';
195 | 					break;
196 | 				case "l":
197 | 					C[i] = 'm';
198 | 					break;
199 | 			};
200 | 			C = C.join('');
201 | 			attach.insertAdjacentHTML('beforeEnd', 
202 | 				`<svg data-id=${id++} tabindex=1 width=666 height=666 viewbox="0 0 666 666">
203 | 					<text x=50 y=100>${id++}</text>
204 | 					${t(C) + t(C) + t(C)}
205 | 				</svg>`
206 | 			);
207 | 		});
208 | 	}
209 | 
210 | 	function skipEach(In, after) {
211 | 		In.split('').forEach((c, skipIndex) => {
212 | 			if ( after >= 0 && skipIndex <= after ) return;
213 | 			if ( skipIndex == 0 ) return;	
214 | 			attach.insertAdjacentHTML('beforeEnd', 
215 | 				`<svg data-id=${id++} tabindex=1 width=666 height=666 viewbox="0 0 666 666">
216 | 					<text x=50 y=100>${id++}</text>
217 | 					${t(Cmds, skipIndex) + t(Cmds, skipIndex) + t(Cmds, skipIndex)}
218 | 				</svg>`
219 | 			);
220 | 		});
221 | 	}
222 | </script>
223 | <script>
224 | 	const NAME_MARKUP = `<h1 class=name>DOSY</h1>`;
225 | 	const overlay = document.querySelector('aside.overlay');
226 | 	let lastActive = document.activeElement;
227 | 
228 | 	document.body.onclick = ({target}) => {
229 | 		let svg;
230 | 		if ( target.matches('.overlay') || target.closest('.overlay') ) {
231 | 			overlay.style.display = 'none';
232 | 			return;
233 | 		} else if ( target.matches('svg') || target.matches('path') ) {
234 | 			svg = target.closest('svg');	
235 | 		} 
236 | 		renderOverlay(svg);
237 | 	};
238 | 	self.onkeydown = ({key}) => {
239 | 		if ( key == 'Escape' ) {
240 | 			overlay.style.display = 'none';
241 | 		} else if ( key == 'Enter' ) {
242 | 			if ( document.activeElement.matches('svg') ) {
243 | 				renderOverlay(document.activeElement);
244 | 			}
245 | 		}
246 | 	};
247 | 	setInterval(() => {
248 | 		if ( document.activeElement !== lastActive ) {
249 | 			lastActive = document.activeElement;
250 | 			if ( lastActive.matches('svg') && overlay.style.display == 'flex' ) {
251 | 				renderOverlay(lastActive);
252 | 			}
253 | 		}
254 | 	}, 50);
255 | 	function renderOverlay(svg) {
256 | 		if ( !! svg ) {
257 | 			if ( svg.closest('main.alt.filled') ) {
258 | 				svg = `<main class="alt filled">${svg.outerHTML}</main>`
259 | 			} else if ( svg.closest('main.filled') ) {
260 | 				svg = `<main class="filled">${svg.outerHTML}</main>`
261 | 			} else {
262 | 				svg = svg.outerHTML;
263 | 			}
264 | 			overlay.style.display = 'flex';
265 | 			overlay.innerHTML = svg + NAME_MARKUP;
266 | 		}
267 | 	}
268 | </script>
269 | 


--------------------------------------------------------------------------------