jennschiffer.com
make8bitart.com
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <meta
7 name="description"
8 content="make8bitart.com is a fun free in-browser pixel art tool for you!"
9 />
10 <meta
11 property="og:description"
12 content="make8bitart.com is a fun free in-browser pixel art tool for you!"
13 />
14 <meta
15 property="og:image"
16 content="https://make8bitart.com/assets/brighton.png"
17 />
18 <meta property="og:title" content="make 8-bit art!" />
19 <title>make 8-bit art!</title>
20 <link
21 rel="preload"
22 href="/assets/fonts/8bit-Art-Sans-subset.woff2"
23 as="font"
24 type="font/woff2"
25 crossorigin
26 />
27 <link
28 rel="preload"
29 href="/assets/fonts/VT323-Regular-subset.woff2"
30 as="font"
31 type="font/woff2"
32 crossorigin
33 />
34 <link rel="stylesheet" href="make8bitart.min.css" />
35 <link rel="icon" href="/assets/brighton.png" />
36 <link rel="manifest" href="/manifest.json" />
37 <meta name="theme-color" content="#00ffff" />
38 <script src="app.min.js" defer></script>
39 <script
40 defer
41 data-domain="make8bitart.com"
42 src="https://plausible.io/js/script.js"
43 ></script>
44 </head>
45
46 <!--
47 ____
48 ___ .-~. /_"-._
49 `-._~-. / /_ "~o\ :Y
50 \ \ / : \~x. ` ')
51 ] Y / | Y< ~-.__j -------------------------
52 / ! _.--~T : l l< /.-~ / \
53 / / ____.--~ . ` l /~\ \<|Y -----\ JENN SCHIFFER MADE THIS |
54 / / .-~~" /| . ',-~\ \L| \ WOWOWOWOWOWOWOWOW 😈 /
55 / / / .^ \ Y~Y \.^>/l_ "--' \________________________/
56 / Y .-"( . l__ j_j l_/ /~_.-~ .
57 Y l / \ ) ~~~." / `/"~ / \.__/l_
58 | \ _.-" ~-{__ l : l._Z~-.___.--~
59 | ~---~ / ~~"---\_ ' __[>
60 l . _.^ ___ _>-y~
61 \ \ . .-~ .-~ ~>--" /
62 \ ~---" / ./ _.-'
63 "-.,_____.,_ _.--~\ _.-~
64 ~~ ( _}
65 `. ~(
66 ) \
67 /,`--'~\--'
68-->
69
70 <body id="gravity-and-time-are-social-constructs">
71 <!--
72 .--.__
73 .~ (@) ~~~---_
74 { `-_~,,,,,,)
75 { (_ ', ---- haha nope
76 ~ . = _',
77 ~- '. =-'
78 ~ :
79 . _,.-~ ('');
80 '. .-~ \ \ ;
81 ':-_ _.--~ \ \; _-=,.
82 ~-:-.__ _.-~ { '---- _'-=,.
83 ~-._~--._ __.-~ ~---------=,.`
84 ~~-._~~-----~~~~~~ .+++~~~~~~~~-__ /
85 ~-.,____ { - + } _/
86 ~~-.______{_ _ -=\ / /_.~
87 : ~--~ // / ..-
88 : / / // / ((
89 : / / { `-------,. ))
90 : / ''=--------. }o
91 .=._________,' ) ))
92 ) _________ -'' ~~
93 / / _ _
94 (_.-.'O'-'. HEADER INFO -->
95
96 <header id="header" class="draggydiv" title="make 8-bit art!" role="banner">
97 <div class="menu">
98 <button
99 role="button"
100 class="draggydivs-drag"
101 aria-label="move this box"
102 >
103 ✥
104 </button>
105 </div>
106 <main>
107 <div class="inner">
108 <h1>make 8-bit art!</h1>
109 <ul id="draggydivs-minimized"></ul>
110 </div>
111 </main>
112 </header>
113
114 <!--
115 _..--+~/@-~--.
116 _-=~ ( . '
117 _-~ _.--=.\ \'''' --- BOOTY HAD ME LIKE...
118 _~ _- \ \_\
119 = _= '--'
120 ' = .
121 : : ____ '=_. ___
122 ___ | ; ____ '~--.~.
123 ; ; _____ } |
124 ___= \ ___ __ __..-...__ ___/__/__
125 : =_ _.-~~ ~~--.__
126 _____ \ ~-+-~ ___~=_______
127 ~@#~~ == ...______ __ ___ _--~~--_ SOCIAL LINKS
128-->
129
130 <section
131 id="what"
132 class="draggydiv draggydivs-init-closed"
133 title="what is this?"
134 data-title="what"
135 >
136 <div class="menu">
137 <button
138 role="button"
139 class="draggydivs-drag"
140 aria-label="move this box"
141 >
142 ✥
143 </button>
144
145 <button
146 role="button"
147 class="draggydivs-minimize"
148 aria-label="minimize this box"
149 >
150 ⨯
151 </button>
152 </div>
153
154 <h2>what is this?</h2>
155
156 <p>
157 this is a free web-based pixel art drawing tool by
158 <a
159 href="https://jennschiffer.com"
160 title="official website of"
161 target="_blank"
162 >jenn schiffer</a
163 >!
164 </p>
165
166 <p>
167 if you make something cool, i wanna see it – find me on bluesky
168 <a rel="me" href="https://bsky.app/profile/jennschiffer.com"
169 >@jennschiffer.com</a
170 >
171 or email hi@jennschiffer.com!
172 </p>
173 </section>
174
175 <!--
176 . .
177 / `. .' \
178 .---. < > < > .---.
179 | \ \ - ~ ~ - / / |
180 ~-..-~ ~-..-~
181 \~~~\.' `./~~~/
182 \__/ \__/
183 / .- . \
184 _._ _.- .-~ ~-. / } \/~~~/
185 _.-'q }~ / } { ; \__/
186 butts --- {'__, / ( / { / `. ,~~| . .
187 `''''='~~-.__( /_ | /- _ `..-' \\ //
188 / \ =/ ~~--~~{ ./| ~-. `-..__\\_//_.-'
189 { \ +\ \ =\ ( ~ - . _ _ _..---~
190 | | { } \ \_\
191 '---.o___,' .o___, TOOLBOX -->
192
193 <section
194 id="toolbox"
195 class="draggydiv draggydivs-init-closed"
196 title="canvas/brush tools"
197 data-title="tools"
198 >
199 <div class="menu">
200 <button
201 role="button"
202 class="draggydivs-drag"
203 aria-label="move this box"
204 >
205 ✥
206 </button>
207
208 <button
209 role="button"
210 class="draggydivs-minimize"
211 aria-label="minimize this box"
212 >
213 ⨯
214 </button>
215 </div>
216
217 <div id="instruments" class="inner">
218 <h2>instruments</h2>
219 <menu role="toolbar">
220 <button id="pencil" role="button" class="current-tool icon-button">
221 <img
222 src="assets/icons/pencil.png"
223 width="45"
224 height="45"
225 alt="draw"
226 />
227 </button>
228 <button id="paint" role="button" class="icon-button">
229 <img
230 src="assets/icons/paint.png"
231 width="52"
232 height="45"
233 alt="paint/fill"
234 />
235 </button>
236 </menu>
237 </div>
238
239 <div id="editing" class="inner">
240 <h2>editing</h2>
241 <menu role="toolbar">
242 <button id="cut" role="button" class="icon-button">
243 <img src="assets/icons/cut.png" width="27" height="45" alt="cut" />
244 </button>
245 <button id="copy" role="button" class="icon-button">
246 <img
247 src="assets/icons/copy.png"
248 width="34"
249 height="45"
250 alt="copy"
251 />
252 </button>
253 <button id="paste" role="button" class="icon-button">
254 <img
255 src="assets/icons/paste.png"
256 width="30"
257 height="45"
258 alt="paste"
259 />
260 </button>
261 </menu>
262
263 <ul class="instructions paste">
264 <li>
265 click on the canvas where you want the top left corner of your
266 copied clip to be pasted.
267 </li>
268 </ul>
269
270 <button role="button" class="text-button" id="undo" disabled="disabled">
271 undo
272 </button>
273 <button role="button" class="text-button" id="redo" disabled="disabled">
274 redo
275 </button>
276 <button role="button" class="text-button" id="new-canvas">
277 new canvas
278 </button>
279 </div>
280
281 <div id="size" class="inner">
282 <h2>brush size</h2>
283 <input
284 aria-label="pixel size text input"
285 id="pixel-size"
286 class="pixel-size-input"
287 type="number"
288 min="2"
289 max="100"
290 step="1"
291 value="15"
292 />
293 <input
294 aria-label="pixel size slider"
295 id="pixel-size-slider"
296 class="pixel-size-input"
297 type="range"
298 min="2"
299 max="100"
300 step="1"
301 value="15"
302 />
303 <div id="pixel-size-demo" class="color-demo"></div>
304 </div>
305 </section>
306
307 <!--
308 _..-=~=-._
309 _.-~' ~.
310 __..---~~~~~ ~.
311 _.-~~ _.._ ~.
312 _ -~_ / \ ;
313 ( ` '@) { | :
314 / | | :
315 / /} ( ) | | .- --- farting on
316 / //-=-~-_-_ | | \ ; .' the h8rs
317 / // | =._-| }/ / / /_.==\ ; _.' *
318 ( oo //| = ) ~| /.__..-='| \ :' **
319 ====||*| / / + ) \ |_.-~`\ : |**
320 |*| * / / / / \ | ([ ]) /|||(
321 * |* /_/ / / ( ] `/ \' /|||_
322 **(* | (((| /_/ __/_/__ -| |-- _|_|__
323 *|\| (((| ----- __|_|__
324 _/(h8rs)|__ ''' -----
325 _||_|__ FILE BOX -->
326
327 <section
328 id="filebox"
329 class="draggydiv draggydivs-init-closed"
330 title="export/save"
331 data-title="export/save"
332 >
333 <div class="menu">
334 <button
335 role="button"
336 class="draggydivs-drag"
337 aria-label="move this box"
338 >
339 ✥
340 </button>
341
342 <button
343 role="button"
344 class="draggydivs-minimize"
345 aria-label="minimize this box"
346 >
347 ⨯
348 </button>
349 </div>
350
351 <div id="import" class="inner hidden">
352 <h2>import art</h2>
353
354 <label for="open-local" class="local" id="open-local-form">
355 from local storage:
356 <button role="button" class="text-button" id="open-local">
357 import local art
358 </button>
359 </label>
360
361 <label for="import-pxon" class="pxon" id="import-pxon-form">
362 import <a href="https://jennmoney.biz/pxon">pxon</a> (WARNING: THIS
363 BREAKS A LOT):
364 <input type="file" id="import-pxon" name="import-pxon" />
365 </label>
366 </div>
367
368 <div id="export">
369 <h2>export art</h2>
370
371 <label for="save-full" class="png" id="save-png-form">
372 to png:<br />
373 <button role="button" class="text-button" id="save-full">
374 full page
375 </button>
376 <button role="button" class="text-button" id="save-selection">
377 selection
378 </button>
379 </label>
380
381 <label for="save-local" class="local" id="save-local-form">
382 to local storage:<br />
383 <button role="button" class="text-button local" id="save-local">
384 local store
385 </button>
386 </label>
387
388 <label for="export-pxon" class="pxon hidden" id="export-pxon-form">
389 export <a href="https://jennmoney.biz/pxon">pxon</a>:<br />
390 <button role="button" class="text-button pxon" id="export-pxon">
391 export pxon
392 </button>
393 </label>
394 </div>
395
396 <ul class="instructions save">
397 <li>
398 click and drag to select the area of the canvas you want to save.
399 </li>
400 </ul>
401 </section>
402
403 <!--
404 <\ _
405 \\ _/{
406 _ \\ _- -_
407 /{ / `\ _- - -_
408 _~ = ( @ \ - - -_
409 _- - ~-_ \( =\ \ - -_
410 _~ - ~_ | 1 :\ \ _-~-_ - -_
411 _- - ~ |V: \ \ _-~ ~-_- -_
412 _-~ - / | : \ \ ~-_- -_
413 _-~ - _.._ { | : _-`` ~- _-_
414 _-~ -__..--~ ~-_ { : \:} --- hi h8rs
415 =~__.--~~ ~-_\ : /
416 \ : /__
417 //`Y'--\\
418 <+ \\
419 \\ WWW
420 MMM COLORBOX -->
421
422 <section
423 id="colorbox"
424 class="draggydiv draggydivs-init-closed"
425 title="color tools"
426 data-title="colors"
427 >
428 <div class="menu">
429 <button
430 role="button"
431 class="draggydivs-drag"
432 aria-label="move this box"
433 >
434 ✥
435 </button>
436
437 <button
438 role="button"
439 class="draggydivs-minimize"
440 aria-label="minimize this box"
441 >
442 ⨯
443 </button>
444 </div>
445
446 <div class="tabs" role="navigation">
447 <button role="button" class="pickers active" data-href="#pickers">
448 color pickers
449 </button>
450 <button role="button" class="palettes" data-href="#custom-palettes">
451 history/custom palettes
452 </button>
453 </div>
454
455 <div id="pickers">
456 <div id="hex-picker">
457 <h2>hex value:</h2>
458 <span class="pound">#</span
459 ><input
460 aria-label="hex color input"
461 type="text"
462 id="hex-color"
463 value="000000"
464 autocomplete="off"
465 autocorrect="off"
466 spellcheck="false"
467 />
468
469 <button role="button" id="color-dropper" class="icon-button">
470 <img
471 src="assets/icons/dropper.png"
472 width="45"
473 height="45"
474 alt="color dropper"
475 />
476 </button>
477 </div>
478
479 <ul class="colors clearfix">
480 <li>
481 <button
482 role="button"
483 class="button color primary cyan"
484 title="cyan"
485 data-color="rgba(0, 255, 255, 1)"
486 ></button>
487 </li>
488 <li>
489 <button
490 role="button"
491 class="button color primary magenta"
492 title="magenta"
493 data-color="rgba(255, 0, 255, 1)"
494 ></button>
495 </li>
496 <li>
497 <button
498 role="button"
499 class="button color primary yellow"
500 title="yellow"
501 data-color="rgba(255, 255, 0, 1)"
502 ></button>
503 </li>
504 <li>
505 <button
506 role="button"
507 class="button color primary black"
508 title="black"
509 data-color="rgba(0, 0, 0, 1)"
510 ></button>
511 </li>
512 <li>
513 <button
514 role="button"
515 class="button color primary gray"
516 title="gray"
517 data-color="rgba(128, 128, 128, 1)"
518 ></button>
519 </li>
520 <li>
521 <button
522 role="button"
523 class="button color primary white"
524 title="white"
525 data-color="rgba(255, 255, 255, 1)"
526 ></button>
527 </li>
528 <li>
529 <button
530 role="button"
531 class="button color transparent"
532 title="erase"
533 data-color="rgba(0, 0, 0, 0)"
534 ></button>
535 </li>
536 </ul>
537
538 <div id="eight-bit-picker">
539 <h2 class="eightbit">click to pick:</h2>
540 <canvas id="eight-bit-colors" width="195" height="195"></canvas>
541 <div class="color-demo eightbit"></div>
542 </div>
543 </div>
544
545 <div id="custom-palettes">
546 <div id="color-history" class="inner">
547 <h2 class="color-history-label">history:</h2>
548 <ul class="color-history-list colors clearfix"></ul>
549 <div id="color-history-tools">
550 <button role="button" class="text-button clear">
551 clear history
552 </button>
553 </div>
554 </div>
555
556 <div id="color-custom" class="palettes inner">
557 <h2 class="color-upload-label">custom palette:</h2>
558 <ul class="color-custom-list colors clearfix"></ul>
559 <div id="color-custom-tools">
560 <p>
561 Upload file in "name,hex" csv format, like in
562 <a href="assets/example.csv">example.csv</a>!
563 </p>
564
565 <input type="file" name="upload-palette" class="import" />
566 <button role="button" class="text-button clear">
567 clear palette
568 </button>
569 </div>
570 </div>
571 </div>
572 </section>
573
574 <section id="save-modal-container" class="modal hidden">
575 <div id="save-modal" class="inside-modal">
576 <div class="controls">
577 <button role="button" class="ui-hider">
578 <img
579 src="assets/draggydivs/hider.png"
580 width="30"
581 height="30"
582 alt="move controls window"
583 />
584 </button>
585 </div>
586 <h2>you saved your art!</h2>
587 <a href="#" target="_blank" download="art.png"
588 ><img id="finished-art"
589 /></a>
590
591 <p>Click or drag your art to your desktop to save!<br /></p>
592 </div>
593 </section>
594
595 <section id="open-modal-container" class="modal hidden">
596 <div id="open-modal" class="inside-modal">
597 <div class="controls">
598 <button role="button" class="ui-hider">
599 <img
600 src="assets/draggydivs/hider.png"
601 width="30"
602 height="30"
603 alt="move controls window"
604 />
605 </button>
606 </div>
607
608 <h2>you have some locally saved art!</h2>
609 <h3>wanna open one? click a thumbnail...</h3>
610
611 <ul class="gallery"></ul>
612 </div>
613 </section>
614
615 <section id="pxon-modal-container" class="modal hidden">
616 <div id="open-modal-pxon" class="inside-modal">
617 <div class="controls">
618 <button role="button" class="ui-hider">
619 <img
620 src="assets/draggydivs/hider.png"
621 width="30"
622 height="30"
623 alt="move controls window"
624 />
625 </button>
626 </div>
627
628 <h2>export pxon!</h2>
629 <h3>
630 <a href="https://jennmoney.biz/pxon/">what is pxon? read my spec!</a>
631 </h3>
632
633 <p>
634 the gist of it is that pxon is pixel art represented in JSON. the
635 current session of your drawing should be represented in the textarea
636 below - paste into a .json file or app that supports pxon for good
637 fun!
638 </p>
639
640 <textarea name="pxon"></textarea>
641
642 <p>
643 <strong
644 >note: pxon is a draft proposal and a fake idea by me (jenn, creator
645 of make8bitart.com) that's being updated sporadically and sometimes
646 doesn't work. please let me know if it's broken!</strong
647 >
648 </p>
649 </div>
650 </section>
651
652 <script type="text/javascript">
653 if ("serviceWorker" in navigator) {
654 navigator.serviceWorker
655 .register("service-worker.js")
656 .then(function (reg) {
657 console.log("service worker registered --- " + reg.scope + " :)");
658 })
659 .catch(function (err) {
660 console.log("service worker failed: " + err);
661 });
662 }
663 </script>
664 </body>
665</html>