morphico 0.4.0 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +62 -45
- package/dist/esm/all.js +50 -0
- package/dist/esm/clip.js +283 -0
- package/dist/esm/engine.js +25 -0
- package/dist/esm/face.js +153 -0
- package/dist/esm/geometry.js +459 -0
- package/dist/esm/icon.js +41 -0
- package/dist/esm/index.js +50 -0
- package/dist/esm/morph.js +107 -0
- package/dist/esm/roundness.js +37 -0
- package/dist/esm/sets/battery.js +87 -0
- package/dist/esm/sets/bell.js +101 -0
- package/dist/esm/sets/characters.js +43 -0
- package/dist/esm/sets/check-mark.js +74 -0
- package/dist/esm/sets/checkbox.js +91 -0
- package/dist/esm/sets/chevron.js +70 -0
- package/dist/esm/sets/condensed.js +137 -0
- package/dist/esm/sets/copy.js +87 -0
- package/dist/esm/sets/eye.js +105 -0
- package/dist/esm/sets/faces.js +482 -0
- package/dist/esm/sets/folder.js +112 -0
- package/dist/esm/sets/handwritten.js +136 -0
- package/dist/esm/sets/lock.js +75 -0
- package/dist/esm/sets/lucide.js +66 -0
- package/dist/esm/sets/media.js +109 -0
- package/dist/esm/sets/menu.js +84 -0
- package/dist/esm/sets/mic.js +102 -0
- package/dist/esm/sets/radio.js +84 -0
- package/dist/esm/sets/round.js +244 -0
- package/dist/esm/sets/shapes.js +455 -0
- package/dist/esm/sets/slim.js +148 -0
- package/dist/esm/sets/square.js +149 -0
- package/dist/esm/sets/theme.js +107 -0
- package/dist/esm/sets/toggle.js +73 -0
- package/dist/esm/sets/volume.js +89 -0
- package/dist/esm/sets/weather.js +691 -0
- package/dist/esm/sets/wifi.js +68 -0
- package/dist/esm/svg.js +31 -0
- package/dist/esm/text.js +88 -0
- package/dist/esm/types.js +3 -0
- package/dist/morphico.js +3764 -3750
- package/dist/types/{iconSets.d.ts → all.d.ts} +0 -2
- package/dist/types/clip.d.ts +4 -11
- package/dist/types/face.d.ts +2 -6
- package/dist/types/icon.d.ts +4 -9
- package/dist/types/index.d.ts +1 -3
- package/dist/types/roundness.d.ts +8 -0
- package/dist/types/sets/battery.d.ts +1 -1
- package/dist/types/sets/bell.d.ts +1 -1
- package/dist/types/sets/checkbox.d.ts +1 -1
- package/dist/types/sets/chevron.d.ts +1 -1
- package/dist/types/sets/condensed.d.ts +1 -1
- package/dist/types/sets/copy.d.ts +1 -1
- package/dist/types/sets/eye.d.ts +1 -1
- package/dist/types/sets/folder.d.ts +1 -1
- package/dist/types/sets/handwritten.d.ts +1 -1
- package/dist/types/sets/lock.d.ts +1 -1
- package/dist/types/sets/media.d.ts +1 -1
- package/dist/types/sets/menu.d.ts +1 -1
- package/dist/types/sets/mic.d.ts +1 -1
- package/dist/types/sets/radio.d.ts +1 -1
- package/dist/types/sets/round.d.ts +1 -1
- package/dist/types/sets/slim.d.ts +1 -1
- package/dist/types/sets/square.d.ts +1 -1
- package/dist/types/sets/theme.d.ts +1 -1
- package/dist/types/sets/toggle.d.ts +1 -1
- package/dist/types/sets/volume.d.ts +1 -1
- package/dist/types/sets/weather.d.ts +1 -1
- package/dist/types/sets/wifi.d.ts +1 -1
- package/dist/types/text.d.ts +8 -13
- package/package.json +95 -3
- package/dist/morphico.mjs +0 -4642
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
/*! morphico v0.5.0 | code: MIT License, Copyright (c) 2026 Raycho Ivanov (see LICENSE)
|
|
2
|
+
* Icons based on Lucide (https://lucide.dev), some of them from Feather (https://feathericons.com):
|
|
3
|
+
*
|
|
4
|
+
* ISC License
|
|
5
|
+
*
|
|
6
|
+
* Copyright (c) 2026 Lucide Icons and Contributors
|
|
7
|
+
*
|
|
8
|
+
* Permission to use, copy, modify, and/or distribute this software for any
|
|
9
|
+
* purpose with or without fee is hereby granted, provided that the above
|
|
10
|
+
* copyright notice and this permission notice appear in all copies.
|
|
11
|
+
*
|
|
12
|
+
* THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
|
|
13
|
+
* WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
|
|
14
|
+
* MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
|
|
15
|
+
* ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
|
|
16
|
+
* WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
|
|
17
|
+
* ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
|
|
18
|
+
* OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
|
|
19
|
+
*
|
|
20
|
+
* The MIT License (MIT) (for the Lucide icons derived from Feather, listed in LICENSE-lucide)
|
|
21
|
+
*
|
|
22
|
+
* Copyright (c) 2013-present Cole Bemis
|
|
23
|
+
*
|
|
24
|
+
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
25
|
+
* of this software and associated documentation files (the "Software"), to deal
|
|
26
|
+
* in the Software without restriction, including without limitation the rights
|
|
27
|
+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
28
|
+
* copies of the Software, and to permit persons to whom the Software is
|
|
29
|
+
* furnished to do so, subject to the following conditions:
|
|
30
|
+
*
|
|
31
|
+
* The above copyright notice and this permission notice shall be included in all
|
|
32
|
+
* copies or substantial portions of the Software.
|
|
33
|
+
*
|
|
34
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
35
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
36
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
37
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
38
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
39
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
40
|
+
* SOFTWARE.
|
|
41
|
+
*/
|
|
42
|
+
import { LUCIDE_STROKE_WIDTH, lucideLine } from './lucide.js';
|
|
43
|
+
const STATES = ['up', 'right', 'down', 'left'];
|
|
44
|
+
/** chevron-up's corners (right end, tip, left end), turned clockwise by `quarterTurns` × 90° around 12,12. */
|
|
45
|
+
const chevron = (quarterTurns) => {
|
|
46
|
+
const turn = ([x, y]) => {
|
|
47
|
+
let [dx, dy] = [x - 12, y - 12];
|
|
48
|
+
for (let step = 0; step < quarterTurns; step++)
|
|
49
|
+
[dx, dy] = [-dy, dx];
|
|
50
|
+
return [12 + dx, 12 + dy];
|
|
51
|
+
};
|
|
52
|
+
const [rightEnd, tip, leftEnd] = [[18, 15], [12, 9], [6, 15]].map(turn);
|
|
53
|
+
return [lucideLine(...rightEnd, ...tip), lucideLine(...tip, ...leftEnd)];
|
|
54
|
+
};
|
|
55
|
+
/** Degrees from one state to another: the shorter way round (half a turn: clockwise). */
|
|
56
|
+
const turnBetween = (fromIndex, toIndex) => {
|
|
57
|
+
const quarterTurns = (toIndex - fromIndex + 4) % 4;
|
|
58
|
+
return quarterTurns === 3 ? -90 : quarterTurns * 90;
|
|
59
|
+
};
|
|
60
|
+
export const iconsChevron = {
|
|
61
|
+
segmentCount: 2,
|
|
62
|
+
strokeWidth: LUCIDE_STROKE_WIDTH,
|
|
63
|
+
lineCap: 'round',
|
|
64
|
+
lineJoin: 'round',
|
|
65
|
+
strokes: Object.fromEntries(STATES.map((state, index) => [state, chevron(index)])),
|
|
66
|
+
alternativeStrokes: {},
|
|
67
|
+
pairLayouts: {},
|
|
68
|
+
spins: Object.fromEntries(STATES.map((state, fromIndex) => [state, Object.fromEntries(STATES
|
|
69
|
+
.filter((other) => other !== state).map((other) => [other, turnBetween(fromIndex, STATES.indexOf(other))]))])),
|
|
70
|
+
};
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
/*! morphico v0.5.0 | MIT License, Copyright (c) 2026 Raycho Ivanov (see LICENSE) */
|
|
2
|
+
// Digit set "condensed": tall, narrow, thin "display" digits with rounded corners, drafted from the reference images in
|
|
3
|
+
// icons/condensed/ (the set format is described in ../types.ts).
|
|
4
|
+
//
|
|
5
|
+
// The shapes are written on the images' own pixel grid and converted: x/y are the stroke's middle line in image
|
|
6
|
+
// pixels, measured from the digit's ink box. Every digit is 94 px tall with a 6 px stroke, most are 50 px wide:
|
|
7
|
+
// middle lines at x 3 / 47 and y 3 (top) / 47 (middle) / 91 (bottom). 5.5 image px = 1 grid unit, so the digits
|
|
8
|
+
// span x 8…16, y 4…20.
|
|
9
|
+
// - straight strokes with rounded corners (roundedPolyline), round ends
|
|
10
|
+
// - 0 = stadium; 8 = two stacked rounded rectangles sharing the middle bar; 9 = 6 turned 180° around 12,12;
|
|
11
|
+
// the 5 ends with the same small upturn as the 9
|
|
12
|
+
// - T-junctions (4's right stem) are drawn out and back over themselves
|
|
13
|
+
import { roundedPolyline } from '../geometry.js';
|
|
14
|
+
import { withTextCharacters } from './characters.js';
|
|
15
|
+
const PIXELS_PER_UNIT = 5.5;
|
|
16
|
+
/** Image pixels (middle line, measured from the ink box of a digit `inkWidth` px wide) → grid units. */
|
|
17
|
+
const fromImage = (inkWidth) => ([x, y]) => [12 + (x - inkWidth / 2) / PIXELS_PER_UNIT, 4 + (y - 3) / PIXELS_PER_UNIT];
|
|
18
|
+
/** A rounded polyline given in image pixels; radii in image pixels too. */
|
|
19
|
+
const drawn = (inkWidth, points, radii) => roundedPolyline(points.map(fromImage(inkWidth)), Array.isArray(radii) ? radii.map((radius) => radius / PIXELS_PER_UNIT) : radii / PIXELS_PER_UNIT);
|
|
20
|
+
const turnedAround = ([x, y]) => [24 - x, 24 - y];
|
|
21
|
+
// corner radii (image px), chosen by pixel comparison with the images: one radius for (almost) every corner
|
|
22
|
+
const CORNER_RADIUS = 12;
|
|
23
|
+
const OUTER_RADIUS = CORNER_RADIUS; // outer corners of the boxes (top and bottom)
|
|
24
|
+
const MIDDLE_RADIUS = CORNER_RADIUS; // corners where a box meets the middle bar
|
|
25
|
+
const THREE_BOWL_RADIUS = 16; // the 3's bowls are rounder
|
|
26
|
+
const THREE_MIDDLE_END_X = 15;
|
|
27
|
+
/** End of the small upturn at the bottom left of 5 and 9 (and of the hook at the top right of 6). */
|
|
28
|
+
const HOOK_END_Y = 79;
|
|
29
|
+
// the 6: hook at the top right, over the top, down the left side, round the bottom, up to the middle bar, back left
|
|
30
|
+
const SIX_POINTS = [[47, 94 - HOOK_END_Y], [47, 3], [3, 3], [3, 91], [47, 91], [47, 47], [3, 47]];
|
|
31
|
+
const SIX_RADII = [0, OUTER_RADIUS, OUTER_RADIUS, OUTER_RADIUS, OUTER_RADIUS, MIDDLE_RADIUS, 0];
|
|
32
|
+
// '-' '/' '.' ',' ':' are added by withTextCharacters (characters.ts)
|
|
33
|
+
export const digitsCondensed = withTextCharacters({
|
|
34
|
+
segmentCount: 20,
|
|
35
|
+
strokeWidth: 6 / PIXELS_PER_UNIT,
|
|
36
|
+
lineCap: 'round',
|
|
37
|
+
lineJoin: 'round',
|
|
38
|
+
strokes: {
|
|
39
|
+
// stadium, from the top middle counter-clockwise
|
|
40
|
+
0: drawn(50, [[25, 3], [3, 3], [3, 91], [47, 91], [47, 3], [25, 3]], 22),
|
|
41
|
+
// flag → stem
|
|
42
|
+
1: drawn(17, [[3, 3], [14, 3], [14, 91]], 0),
|
|
43
|
+
// top bar → right side → middle bar → left side → bottom bar
|
|
44
|
+
2: drawn(50, [[3, 3], [47, 3], [47, 47], [3, 47], [3, 91], [47, 91]], [0, CORNER_RADIUS, CORNER_RADIUS, CORNER_RADIUS, CORNER_RADIUS, 0]),
|
|
45
|
+
// top bar → upper bowl → middle bar out to the left and back → lower bowl → bottom bar
|
|
46
|
+
3: drawn(50, [[3, 3], [47, 3], [47, 47], [THREE_MIDDLE_END_X, 47], [47, 47], [47, 91], [3, 91]], [0, THREE_BOWL_RADIUS, THREE_BOWL_RADIUS, 0, THREE_BOWL_RADIUS, THREE_BOWL_RADIUS, 0]),
|
|
47
|
+
// left stem down → crossbar → right stem up to the top and back down to the bottom
|
|
48
|
+
4: drawn(50, [[3, 3], [3, 47], [47, 47], [47, 3], [47, 91]], [0, CORNER_RADIUS, 0, 0, 0]),
|
|
49
|
+
// top bar right → left, left side down, middle bar → right side → bottom bar → small upturn
|
|
50
|
+
5: drawn(50, [[47, 3], [3, 3], [3, 47], [47, 47], [47, 91], [3, 91], [3, HOOK_END_Y]], [0, 0, 0, MIDDLE_RADIUS, OUTER_RADIUS, OUTER_RADIUS, 0]),
|
|
51
|
+
6: drawn(50, SIX_POINTS, SIX_RADII),
|
|
52
|
+
// top bar → slanted stroke down
|
|
53
|
+
7: drawn(49, [[3, 3], [46, 3], [24.5, 91]], 0),
|
|
54
|
+
// from the waist: top box (left side up, clockwise), along the middle bar, bottom box (counter-clockwise)
|
|
55
|
+
8: drawn(50, [[3 + MIDDLE_RADIUS, 47], [3, 47], [3, 3], [47, 3], [47, 47], [3, 47], [3, 91], [47, 91], [47, 47], [3 + MIDDLE_RADIUS, 47]], [0, MIDDLE_RADIUS, OUTER_RADIUS, OUTER_RADIUS, MIDDLE_RADIUS, MIDDLE_RADIUS, OUTER_RADIUS, OUTER_RADIUS, MIDDLE_RADIUS, 0]),
|
|
56
|
+
// the 6 turned 180°, drawn the other way round (box first, then the small upturn)
|
|
57
|
+
9: roundedPolyline(SIX_POINTS.map(fromImage(50)).map(turnedAround).reverse(), [...SIX_RADII].reverse().map((radius) => radius / PIXELS_PER_UNIT)),
|
|
58
|
+
},
|
|
59
|
+
alternativeStrokes: {
|
|
60
|
+
// the 8 traced like the 0 (from the top, counter-clockwise): left side of the top box down to the middle of
|
|
61
|
+
// the middle bar, once around the bottom box back to the middle, right side of the top box back up
|
|
62
|
+
'8-like-0': drawn(50, [[25, 3], [3, 3], [3, 47], [25, 47], [3, 47], [3, 91], [47, 91], [47, 47], [25, 47], [47, 47], [47, 3], [25, 3]], [0, OUTER_RADIUS, MIDDLE_RADIUS, 0, MIDDLE_RADIUS, OUTER_RADIUS, OUTER_RADIUS, MIDDLE_RADIUS, 0, MIDDLE_RADIUS, OUTER_RADIUS, 0]),
|
|
63
|
+
// the 8 traced like the 3 (as in the square set), starting and ending at the left part of the middle bar: around the top
|
|
64
|
+
// box, along the middle bar out to the left and back, around the bottom box
|
|
65
|
+
'8-like-3': drawn(50, [[3 + MIDDLE_RADIUS, 47], [3, 47], [3, 3], [47, 3], [47, 47], [3 + MIDDLE_RADIUS, 47], [47, 47], [47, 91], [3, 91], [3, 47], [3 + MIDDLE_RADIUS, 47]], [0, MIDDLE_RADIUS, OUTER_RADIUS, OUTER_RADIUS, MIDDLE_RADIUS, 0, MIDDLE_RADIUS, OUTER_RADIUS, OUTER_RADIUS, MIDDLE_RADIUS, 0]),
|
|
66
|
+
},
|
|
67
|
+
// optimizer fits (tools/check.ts) for the pairs the user rated bad / midd
|
|
68
|
+
pairLayouts: {
|
|
69
|
+
0: {
|
|
70
|
+
1: { startSegment: 5, reversed: true },
|
|
71
|
+
2: { startSegment: 5, reversed: true },
|
|
72
|
+
3: { startSegment: 5, reversed: true },
|
|
73
|
+
4: { breakpoints: [0, 0.6458, 0.6667, 1, 1.2292, 1.4375, 1.4583, 1.4583, 1.4583, 2, 3, 4, 4.5208, 4.5208, 4.5208, 4.5208, 4.75, 5, 5.3125, 5.3125, 6] },
|
|
74
|
+
5: { startSegment: 4, reversed: true },
|
|
75
|
+
7: { startSegment: 5, reversed: true },
|
|
76
|
+
9: { startSegment: 6, reversed: true },
|
|
77
|
+
},
|
|
78
|
+
1: {
|
|
79
|
+
0: { breakpoints: [0, 0, 0, 0, 0, 0.5, 1, 1.125, 1.25, 1.375, 1.5, 1.625, 1.75, 1.8542, 1.8542, 1.8542, 1.8542, 1.8542, 1.8542, 1.8542, 2] },
|
|
80
|
+
},
|
|
81
|
+
2: {
|
|
82
|
+
6: { breakpoints: [0, 1, 1, 1, 1, 2, 3, 4, 5, 6, 7, 7.5, 8, 8.2917, 8.7292, 8.7292, 8.7292, 8.7292, 8.7292, 8.7292, 9] },
|
|
83
|
+
9: { breakpoints: [0, 0.2292, 0.2292, 0.2292, 0.2292, 0.2292, 0.2292, 0.2292, 0.3333, 0.6875, 1, 1.5, 2, 3, 4, 5, 6, 7, 8, 8, 9] },
|
|
84
|
+
0: { breakpoints: [0, 0, 0, 0.0625, 0.3333, 0.6875, 1, 2, 2.5, 3, 3.5625, 3.6042, 4, 5, 6, 7, 7, 7, 7, 8, 9] },
|
|
85
|
+
},
|
|
86
|
+
3: {
|
|
87
|
+
4: { breakpoints: [0, 0, 1, 2, 2, 2, 3, 3.4167, 3.4167, 4, 5, 6, 6.5833, 6.5833, 7, 8, 8.4375, 8.4583, 8.4583, 9, 10] },
|
|
88
|
+
9: { breakpoints: [0, 0.25, 0.25, 0.25, 0.25, 0.25, 0.25, 0.25, 0.375, 0.8333, 1, 2, 3, 4, 5, 6, 7, 8, 9, 9.6667, 10] },
|
|
89
|
+
0: { breakpoints: [0, 0, 0, 0.0833, 0.375, 0.8333, 1, 2, 3, 4, 5, 6, 7, 8, 9, 9.1667, 9.625, 9.9167, 10, 10, 10] },
|
|
90
|
+
},
|
|
91
|
+
4: {
|
|
92
|
+
6: { breakpoints: [0, 0, 0, 1, 1.8333, 2, 2.7083, 2.8125, 2.8125, 2.8125, 2.8125, 2.8125, 2.8125, 2.8125, 2.8125, 2.8125, 2.8125, 2.8125, 3, 4, 5] },
|
|
93
|
+
8: { breakpoints: [0, 0, 0.3333, 0.6875, 1, 2, 2.3125, 2.3125, 2.3125, 2.3125, 2.3125, 2.3125, 2.3125, 2.3125, 2.3125, 2.6667, 3, 3.5625, 3.75, 4, 5] },
|
|
94
|
+
9: { breakpoints: [0, 1, 1, 1, 1, 2, 3, 4, 4.125, 4.1875, 4.1875, 4.1875, 4.1875, 4.1875, 4.2292, 4.3958, 4.4375, 4.875, 5, 5, 5] },
|
|
95
|
+
3: { breakpoints: [0, 1, 2, 3, 4, 4.1875, 4.3125, 4.4583, 4.5, 4.5, 4.5, 4.5, 4.5, 4.5, 4.5417, 4.6875, 4.8125, 4.9583, 5, 5, 5] },
|
|
96
|
+
0: { breakpoints: [0, 0.0625, 0.3333, 0.6875, 1, 1.5208, 1.7083, 1.7917, 1.8542, 2, 2.3125, 2.6667, 2.9375, 3, 3, 3, 3.25, 3.5, 3.75, 4, 5] },
|
|
97
|
+
},
|
|
98
|
+
5: {
|
|
99
|
+
8: { breakpoints: [0, 0, 0, 0, 0.25, 0.4375, 1, 1.25, 1.4375, 2, 2.3333, 3, 4, 5, 6, 7, 8, 8, 8, 8, 8] },
|
|
100
|
+
0: { breakpoints: [0, 0.8125, 0.8125, 0.8125, 0.8125, 1, 2, 3, 3.3958, 3.4375, 4, 4.5, 5, 6, 6.5, 7, 8, 8, 8, 8, 8] },
|
|
101
|
+
},
|
|
102
|
+
6: {
|
|
103
|
+
8: { breakpoints: [0, 1, 1, 1, 1, 1, 2, 3, 3.5417, 3.5417, 3.6458, 4, 5, 6, 7, 8, 9, 9.6667, 10, 10, 10] },
|
|
104
|
+
4: { breakpoints: [0, 1, 2, 3, 4, 5, 6, 7, 8, 8.7292, 8.7292, 8.7292, 8.7292, 8.7292, 8.7292, 8.7292, 8.7292, 8.7292, 8.7292, 9, 10] },
|
|
105
|
+
2: { breakpoints: [0, 1, 1, 1, 1, 1, 2, 3, 3.5833, 3.6458, 4, 4.5, 5, 5.5, 6, 6.125, 6.125, 7, 8, 9, 10] },
|
|
106
|
+
},
|
|
107
|
+
7: {
|
|
108
|
+
8: { breakpoints: [0, 0, 0, 0.2292, 0.6042, 0.7292, 0.8333, 1, 1.0833, 1.125, 1.3542, 1.5208, 1.5417, 1.7292, 1.8125, 1.8125, 1.8125, 1.8125, 1.8125, 1.8125, 2] },
|
|
109
|
+
0: { breakpoints: [0, 0, 0, 0.0417, 0.25, 0.4375, 1, 1.125, 1.2292, 1.3542, 1.4792, 1.5833, 1.7083, 1.8542, 1.8958, 1.8958, 1.8958, 1.8958, 1.8958, 1.8958, 2] },
|
|
110
|
+
},
|
|
111
|
+
8: {
|
|
112
|
+
// as in round and square: the 0's left and right sides move in to the middle of the 8's middle bar
|
|
113
|
+
0: { tracing: '8-like-0', breakpoints: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 9.5, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19] },
|
|
114
|
+
4: { startSegment: 5, reversed: true },
|
|
115
|
+
5: { startSegment: 10, reversed: true },
|
|
116
|
+
6: { startSegment: 3 },
|
|
117
|
+
7: { breakpoints: [0, 1, 2, 3, 3.7083, 4, 4.2708, 4.4792, 4.7083, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16] },
|
|
118
|
+
9: { startSegment: 17 },
|
|
119
|
+
// as in the square set: both ends of the 3 move to the left part of its middle bar, where the 8's boxes close
|
|
120
|
+
3: { tracing: '8-like-3', breakpoints: [0, 1, 2, 3, 4, 5, 6, 6.5, 7, 7.6458, 8, 8.3542, 9, 9.5, 10, 11, 12, 13, 14, 15, 16] },
|
|
121
|
+
},
|
|
122
|
+
9: {
|
|
123
|
+
8: { breakpoints: [0, 0, 0.3333, 1, 2, 2.5, 3, 4, 4.5, 5, 6, 6.1458, 6.3542, 6.4583, 6.4583, 7, 8, 9, 9, 9, 10] },
|
|
124
|
+
4: { breakpoints: [0, 1, 2, 2, 2, 3, 4, 5, 6, 6.0625, 6.0625, 6.0625, 6.0625, 6.0625, 6.125, 6.3542, 6.4167, 7, 8, 9, 10] },
|
|
125
|
+
3: { breakpoints: [0, 1, 2, 3, 3.7708, 3.7708, 3.7708, 3.7708, 4, 4.5, 5, 6, 6.2917, 6.5, 6.5, 6.5, 6.7083, 7, 8, 9, 10] },
|
|
126
|
+
2: { breakpoints: [0, 1, 2, 3, 3.7917, 3.7917, 3.7917, 3.7917, 4, 4.4792, 5, 5.5, 6, 6.3542, 6.4167, 7, 8, 9, 9, 9, 10] },
|
|
127
|
+
0: { breakpoints: [0, 1, 2, 2.5, 3, 4, 4.5, 5, 6, 6.1458, 6.3333, 6.5, 6.6667, 6.8542, 7, 8, 8.5, 9, 10, 10, 10] },
|
|
128
|
+
// turned back by 180° this is exactly the 6 (same segment split, same direction) → a pure spin
|
|
129
|
+
6: {
|
|
130
|
+
breakpoints: [0, 0.5, 1, 2, 2.5, 3, 4, 4.5, 5, 5.5, 6, 6.25, 6.5, 6.75, 7, 7.5, 8, 8.5, 9, 9.5, 10],
|
|
131
|
+
reversed: true,
|
|
132
|
+
},
|
|
133
|
+
},
|
|
134
|
+
},
|
|
135
|
+
spins: { 6: { 9: 180 }, 9: { 6: -180 } },
|
|
136
|
+
textLayout: { cellWidth: 8, spacing: 3.5, baselineY: 20, colonDotsY: [8, 16] },
|
|
137
|
+
});
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
/*! morphico v0.5.0 | code: MIT License, Copyright (c) 2026 Raycho Ivanov (see LICENSE)
|
|
2
|
+
* Icons based on Lucide (https://lucide.dev), some of them from Feather (https://feathericons.com):
|
|
3
|
+
*
|
|
4
|
+
* ISC License
|
|
5
|
+
*
|
|
6
|
+
* Copyright (c) 2026 Lucide Icons and Contributors
|
|
7
|
+
*
|
|
8
|
+
* Permission to use, copy, modify, and/or distribute this software for any
|
|
9
|
+
* purpose with or without fee is hereby granted, provided that the above
|
|
10
|
+
* copyright notice and this permission notice appear in all copies.
|
|
11
|
+
*
|
|
12
|
+
* THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
|
|
13
|
+
* WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
|
|
14
|
+
* MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
|
|
15
|
+
* ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
|
|
16
|
+
* WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
|
|
17
|
+
* ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
|
|
18
|
+
* OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
|
|
19
|
+
*
|
|
20
|
+
* The MIT License (MIT) (for the Lucide icons derived from Feather, listed in LICENSE-lucide)
|
|
21
|
+
*
|
|
22
|
+
* Copyright (c) 2013-present Cole Bemis
|
|
23
|
+
*
|
|
24
|
+
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
25
|
+
* of this software and associated documentation files (the "Software"), to deal
|
|
26
|
+
* in the Software without restriction, including without limitation the rights
|
|
27
|
+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
28
|
+
* copies of the Software, and to permit persons to whom the Software is
|
|
29
|
+
* furnished to do so, subject to the following conditions:
|
|
30
|
+
*
|
|
31
|
+
* The above copyright notice and this permission notice shall be included in all
|
|
32
|
+
* copies or substantial portions of the Software.
|
|
33
|
+
*
|
|
34
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
35
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
36
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
37
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
38
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
39
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
40
|
+
* SOFTWARE.
|
|
41
|
+
*/
|
|
42
|
+
import { LUCIDE_STROKE_WIDTH, lucideArc, lucideCubic, lucideLine, lucidePoint } from './lucide.js';
|
|
43
|
+
/** The front page, clockwise from its top edge. */
|
|
44
|
+
const FRONT_PAGE = [
|
|
45
|
+
lucideLine(10, 8, 20, 8),
|
|
46
|
+
lucideArc(20, 10, 2, -90, 0),
|
|
47
|
+
lucideLine(22, 10, 22, 20),
|
|
48
|
+
lucideArc(20, 20, 2, 0, 90),
|
|
49
|
+
lucideLine(20, 22, 10, 22),
|
|
50
|
+
lucideArc(10, 20, 2, 90, 180),
|
|
51
|
+
lucideLine(8, 20, 8, 10),
|
|
52
|
+
lucideArc(10, 10, 2, 180, 270),
|
|
53
|
+
];
|
|
54
|
+
/** The back page: the L that shows behind the front page, from its bottom end up and over. */
|
|
55
|
+
const BACK_PAGE = [
|
|
56
|
+
lucideCubic(4, 16, 2.9, 16, 2, 15.1, 2, 14),
|
|
57
|
+
lucideLine(2, 14, 2, 4),
|
|
58
|
+
lucideCubic(2, 4, 2, 2.9, 2.9, 2, 4, 2),
|
|
59
|
+
lucideLine(4, 2, 14, 2),
|
|
60
|
+
lucideCubic(14, 2, 15.1, 2, 16, 2.9, 16, 4),
|
|
61
|
+
];
|
|
62
|
+
const CHECK = [lucideLine(20, 6, 9, 17), lucideLine(9, 17, 4, 12)];
|
|
63
|
+
/** The check as a loop matching the page: corner → long end → corner → short end → corner. */
|
|
64
|
+
const CHECK_LOOP = [lucideLine(9, 17, 20, 6), lucideLine(20, 6, 9, 17), lucideLine(9, 17, 4, 12), lucideLine(4, 12, 9, 17)];
|
|
65
|
+
const page = {
|
|
66
|
+
strokes: { copy: FRONT_PAGE, copied: CHECK },
|
|
67
|
+
alternativeStrokes: { 'check-loop': CHECK_LOOP },
|
|
68
|
+
pairLayouts: {
|
|
69
|
+
// the page's default spread: 2 segments per edge, 1 per corner; each edge → one stroke of the loop, each
|
|
70
|
+
// corner → a zero-length segment at its end
|
|
71
|
+
copied: { copy: { tracing: 'check-loop', breakpoints: [0, 0.5, 1, 1, 1.5, 2, 2, 2.5, 3, 3, 3.5, 4, 4] } },
|
|
72
|
+
},
|
|
73
|
+
};
|
|
74
|
+
const backPage = {
|
|
75
|
+
strokes: { copy: BACK_PAGE, copied: lucidePoint(4, 16) },
|
|
76
|
+
alternativeStrokes: {},
|
|
77
|
+
pairLayouts: { copied: { copy: { draw: 0.5 } } },
|
|
78
|
+
};
|
|
79
|
+
export const iconsCopy = {
|
|
80
|
+
segmentCount: 12,
|
|
81
|
+
strokeWidth: LUCIDE_STROKE_WIDTH,
|
|
82
|
+
lineCap: 'round',
|
|
83
|
+
lineJoin: 'round',
|
|
84
|
+
...page,
|
|
85
|
+
morePieces: [backPage],
|
|
86
|
+
spins: {},
|
|
87
|
+
};
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
/*! morphico v0.5.0 | code: MIT License, Copyright (c) 2026 Raycho Ivanov (see LICENSE)
|
|
2
|
+
* Icons based on Lucide (https://lucide.dev), some of them from Feather (https://feathericons.com):
|
|
3
|
+
*
|
|
4
|
+
* ISC License
|
|
5
|
+
*
|
|
6
|
+
* Copyright (c) 2026 Lucide Icons and Contributors
|
|
7
|
+
*
|
|
8
|
+
* Permission to use, copy, modify, and/or distribute this software for any
|
|
9
|
+
* purpose with or without fee is hereby granted, provided that the above
|
|
10
|
+
* copyright notice and this permission notice appear in all copies.
|
|
11
|
+
*
|
|
12
|
+
* THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
|
|
13
|
+
* WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
|
|
14
|
+
* MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
|
|
15
|
+
* ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
|
|
16
|
+
* WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
|
|
17
|
+
* ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
|
|
18
|
+
* OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
|
|
19
|
+
*
|
|
20
|
+
* The MIT License (MIT) (for the Lucide icons derived from Feather, listed in LICENSE-lucide)
|
|
21
|
+
*
|
|
22
|
+
* Copyright (c) 2013-present Cole Bemis
|
|
23
|
+
*
|
|
24
|
+
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
25
|
+
* of this software and associated documentation files (the "Software"), to deal
|
|
26
|
+
* in the Software without restriction, including without limitation the rights
|
|
27
|
+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
28
|
+
* copies of the Software, and to permit persons to whom the Software is
|
|
29
|
+
* furnished to do so, subject to the following conditions:
|
|
30
|
+
*
|
|
31
|
+
* The above copyright notice and this permission notice shall be included in all
|
|
32
|
+
* copies or substantial portions of the Software.
|
|
33
|
+
*
|
|
34
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
35
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
36
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
37
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
38
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
39
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
40
|
+
* SOFTWARE.
|
|
41
|
+
*/
|
|
42
|
+
import { LUCIDE_SLASH, LUCIDE_STROKE_WIDTH, lucideArc, lucidePoint } from './lucide.js';
|
|
43
|
+
// the lids: top lid = arc around 12,15.7506 (r 10.75), bottom lid = arc around 12,8.2494; the corners: small arcs (r 1)
|
|
44
|
+
const topLid = (startAngle, endAngle) => lucideArc(12, 15.7506, 10.75, startAngle, endAngle);
|
|
45
|
+
const bottomLid = (startAngle, endAngle) => lucideArc(12, 8.2494, 10.75, startAngle, endAngle);
|
|
46
|
+
const RIGHT_CORNER = lucideArc(21.0005, 12, 1, -20.365, 20.365);
|
|
47
|
+
const LEFT_CORNER = lucideArc(2.9995, 12, 1, 159.635, 200.365);
|
|
48
|
+
/** The middles of eye-off's gaps: on the top lid (between -120.724° and -96.796°) and the bottom lid (37.8° … 59.4°). */
|
|
49
|
+
const TOP_GAP_MIDDLE = (-120.724 - 96.796) / 2;
|
|
50
|
+
const BOTTOM_GAP_MIDDLE = (37.8063 + 59.3592) / 2;
|
|
51
|
+
// each part: lid, corner, lid — 6 + 2 + 4 segments in both states, so the corner stays and the lids only shorten
|
|
52
|
+
const PART_LAYOUT = { breakpoints: [0, 0.1667, 0.3333, 0.5, 0.6667, 0.8333, 1, 1.5, 2, 2.25, 2.5, 2.75, 3] };
|
|
53
|
+
const rightPart = {
|
|
54
|
+
strokes: {
|
|
55
|
+
visible: [topLid(TOP_GAP_MIDDLE, -22.4122), RIGHT_CORNER, bottomLid(22.4122, BOTTOM_GAP_MIDDLE)],
|
|
56
|
+
hidden: [topLid(-96.796, -22.4122), RIGHT_CORNER, bottomLid(22.4122, 37.8063)],
|
|
57
|
+
},
|
|
58
|
+
alternativeStrokes: {},
|
|
59
|
+
pairLayouts: { visible: { hidden: PART_LAYOUT }, hidden: { visible: PART_LAYOUT } },
|
|
60
|
+
};
|
|
61
|
+
const leftPart = {
|
|
62
|
+
strokes: {
|
|
63
|
+
visible: [bottomLid(BOTTOM_GAP_MIDDLE, 157.5878), LEFT_CORNER, topLid(-157.5878, TOP_GAP_MIDDLE)],
|
|
64
|
+
hidden: [bottomLid(59.3592, 157.5878), LEFT_CORNER, topLid(-157.5878, -120.724)],
|
|
65
|
+
},
|
|
66
|
+
alternativeStrokes: {},
|
|
67
|
+
pairLayouts: { visible: { hidden: PART_LAYOUT }, hidden: { visible: PART_LAYOUT } },
|
|
68
|
+
};
|
|
69
|
+
/** eye-off's pupil: the half circle clockwise from 46° (lower right) to 224° (upper left). */
|
|
70
|
+
const HALF_PUPIL = [lucideArc(12, 12, 3, 45.9957, 224.0043)];
|
|
71
|
+
/** The middle of the pupil's gap (upper right), from where the gap pulls back into the half's ends. */
|
|
72
|
+
const PUPIL_GAP_MIDDLE = (224.0043 + 405.9957) / 2;
|
|
73
|
+
const GAP_HALF_SHARE = (405.9957 - 224.0043) / 2 / 360;
|
|
74
|
+
const pupil = {
|
|
75
|
+
strokes: { visible: [lucideArc(12, 12, 3, -90, 270)], hidden: HALF_PUPIL },
|
|
76
|
+
alternativeStrokes: { 'pupil-from-gap-middle': [lucideArc(12, 12, 3, PUPIL_GAP_MIDDLE, PUPIL_GAP_MIDDLE + 360)] },
|
|
77
|
+
pairLayouts: {
|
|
78
|
+
// 3 segments per gap half, 6 along the half circle (it stays)
|
|
79
|
+
visible: {
|
|
80
|
+
hidden: {
|
|
81
|
+
tracing: 'pupil-from-gap-middle',
|
|
82
|
+
breakpoints: [
|
|
83
|
+
...[0, 1, 2].map((index) => (index / 3) * GAP_HALF_SHARE),
|
|
84
|
+
...[0, 1, 2, 3, 4, 5].map((index) => GAP_HALF_SHARE + (index / 6) * (1 - 2 * GAP_HALF_SHARE)),
|
|
85
|
+
...[0, 1, 2, 3].map((index) => 1 - GAP_HALF_SHARE + (index / 3) * GAP_HALF_SHARE),
|
|
86
|
+
].map((breakpoint) => +breakpoint.toFixed(4)),
|
|
87
|
+
},
|
|
88
|
+
},
|
|
89
|
+
hidden: { visible: { breakpoints: [0, 0, 0, 0, 0.1667, 0.3333, 0.5, 0.6667, 0.8333, 1, 1, 1, 1] } },
|
|
90
|
+
},
|
|
91
|
+
};
|
|
92
|
+
const slash = {
|
|
93
|
+
strokes: { visible: lucidePoint(2, 2), hidden: LUCIDE_SLASH },
|
|
94
|
+
alternativeStrokes: {},
|
|
95
|
+
pairLayouts: { visible: { hidden: { draw: true } } },
|
|
96
|
+
};
|
|
97
|
+
export const iconsEye = {
|
|
98
|
+
segmentCount: 12,
|
|
99
|
+
strokeWidth: LUCIDE_STROKE_WIDTH,
|
|
100
|
+
lineCap: 'round',
|
|
101
|
+
lineJoin: 'round',
|
|
102
|
+
...rightPart,
|
|
103
|
+
morePieces: [leftPart, pupil, slash],
|
|
104
|
+
spins: {},
|
|
105
|
+
};
|