Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
Circle.svelte
Cross.svelte
DiagonalSquare.svelte
Dots.svelte
Grid.svelte
HalfSquare.svelte
LetterBlock.svelte
OppositeCircles.svelte
QuarterCircle.svelte
colors.js
lib.js
runes
Runes are available from Svelte 5 onwards, and this playground is using Svelte 3.46.4.
999
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
›
⌄
⌄
⌄
⌄
⌄
<script>
// based on https://frontend.horse/articles/generative-grids/
import Grid from './Grid.svelte';
import { random, colors, interpolateLab as interpolate, randomWords, seedPRNG as seed } from './lib';
import { getBackgroundColors } from './colors';
import { tick } from 'svelte';
import { tweened } from 'svelte/motion';
let counter = 0;
let colorPalette = [];
let bgInner = tweened('#fff', { duration: 500, interpolate });
let bgOuter = tweened('#fff', { duration: 500, interpolate });
let seedWord = randomWords();
seed(seedWord);
regenerate();
function regenerate() {
counter++;
newPalette();
}
function newSeed() {
seedWord = randomWords();
}
function newPalette() {
colorPalette = random(colors);
const background = getBackgroundColors(colorPalette);
$bgInner = background.bgInner;
$bgOuter = background.bgOuter;
}
function setSeed() {
Error compiling component
WebAssembly.instantiateStreaming(): value type opcode @+13
999
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
›
/* App.svelte generated by Svelte v3.46.4 */
import {
SvelteComponent,
append,
append_styles,
attr,
check_outros,
component_subscribe,
create_component,
destroy_component,
destroy_each,
detach,
element,
group_outros,
init,
insert,
listen,
mount_component,
noop,
prevent_default,
run_all,
safe_not_equal,
set_input_value,
set_store_value,
set_style,
space,
transition_in,
transition_out
} from "svelte/internal";
import Grid from './Grid.svelte';
import {
random,
colors,
interpolateLab as interpolate,
result = svelte.compile(source, {
generate: ,
});9
1
›
.seed.svelte-1v60u12.svelte-1v60u12{position:relative}.top.svelte-1v60u12.svelte-1v60u12{display:flex;gap:1rem;flex-wrap:wrap;align-items:start;justify-content:space-between}input.svelte-1v60u12.svelte-1v60u12{font-size:1rem}label.svelte-1v60u12.svelte-1v60u12{color:white;position:absolute;top:-1rem;font-size:0.75rem}*{box-sizing:border-box}body{position:relative;padding:0}.button.svelte-1v60u12.svelte-1v60u12{position:absolute;bottom:0;right:0;padding:0.5rem;margin:0;border-top-left-radius:12px;background:#ffffffcc;border:0.5px solid #555555cc;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:0.25rem;font-weight:600;color:#333;font-size:0.75rem}.button.svelte-1v60u12 svg.svelte-1v60u12{width:1.25rem;transition:0.3s ease-in-out transform}.button.svelte-1v60u12:hover svg.svelte-1v60u12{transform:rotate(-45deg)}.svelte-1v60u12.svelte-1v60u12:is(input, button):focus,.svelte-1v60u12.svelte-1v60u12:is(input, button):active{outline:2px solid #f06}.button.svelte-1v60u12:focus svg.svelte-1v60u12,.button.svelte-1v60u12:active svg.svelte-1v60u12{transform:rotate(-90deg)}.container.svelte-1v60u12.svelte-1v60u12{height:100%;padding:1rem;background-image:radial-gradient(var(--bg-inner) 0%, var(--bg-outer) 100%)}.grid.svelte-1v60u12.svelte-1v60u12{display:grid;grid-template-rows:5rem auto 2rem;height:100%}.grid.svelte-1v60u12>*:not(.top){grid-column:1/2;grid-row:2/3}.colors.svelte-1v60u12.svelte-1v60u12{display:flex;border:1px solid black}.palette.svelte-1v60u12.svelte-1v60u12{height:20px;width:20px}
{
html: Fragment {...}
- start: 945
- end: 1973
- type: "Fragment"
children: [...] (5)
Text {...}
- start: 943
- end: 945
- type: "Text"
- raw: "\n\n"
- data: "\n\n"
} Element {...}
- start: 945
- end: 1558
- type: "Element"
- name: "div"
attributes: [...] (3)
Attribute {...}
- start: 950
- end: 967
- type: "Attribute"
- name: "class"
value: [...] (1)
Text {...}
- start: 957
- end: 966
- type: "Text"
- raw: "container"
- data: "container"
}
]
} StyleDirective {...}
- start: 968
- end: 995
- type: "StyleDirective"
- name: "--bg-inner"
value: [...] (1)
MustacheTag {...}
- start: 985
- end: 995
- type: "MustacheTag"
expression: Identifier {...}
- type: "Identifier"
- start: 986
- end: 994
loc: {...}
start: {...}
- line: 42
- column: 41
}end: {...}
- line: 42
- column: 49
}
}- name: "$bgInner"
}
}
]
} StyleDirective {...}
- start: 996
- end: 1023
- type: "StyleDirective"
- name: "--bg-outer"
value: [...] (1)
MustacheTag {...}
- start: 1013
- end: 1023
- type: "MustacheTag"
expression: Identifier {...}
- type: "Identifier"
- start: 1014
- end: 1022
loc: {...}
start: {...}
- line: 42
- column: 69
}end: {...}
- line: 42
- column: 77
}
}- name: "$bgOuter"
}
}
]
}
]children: [...] (3)
Text {...}
- start: 1024
- end: 1026
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
} Element {...}
- start: 1026
- end: 1549
- type: "Element"
- name: "div"
attributes: [...] (1)
Attribute {...}
- start: 1031
- end: 1043
- type: "Attribute"
- name: "class"
value: [...] (1)
Text {...}
- start: 1038
- end: 1042
- type: "Text"
- raw: "grid"
- data: "grid"
}
]
}
]children: [...] (5)
Text {...}
- start: 1044
- end: 1047
- type: "Text"
- raw: "\n\t\t"
- data: "\n\t\t"
} Element {...}
- start: 1047
- end: 1490
- type: "Element"
- name: "div"
attributes: [...] (1)
Attribute {...}
- start: 1052
- end: 1063
- type: "Attribute"
- name: "class"
value: [...] (1)
Text {...}
- start: 1059
- end: 1062
- type: "Text"
- raw: "top"
- data: "top"
}
]
}
]children: [...] (5)
Text {...}
- start: 1064
- end: 1068
- type: "Text"
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
} Element {...}
- start: 1068
- end: 1205
- type: "Element"
- name: "div"
attributes: [...] (1)
Attribute {...}
- start: 1073
- end: 1087
- type: "Attribute"
- name: "class"
value: [...] (1)
Text {...}
- start: 1080
- end: 1086
- type: "Text"
- raw: "colors"
- data: "colors"
}
]
}
]children: [...] (3)
Text {...}
- start: 1088
- end: 1092
- type: "Text"
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
} EachBlock {...}
- start: 1092
- end: 1195
- type: "EachBlock"
expression: Identifier {...}
- type: "Identifier"
- start: 1099
- end: 1111
loc: {...}
start: {...}
- line: 46
- column: 10
}end: {...}
- line: 46
- column: 22
}
}- name: "colorPalette"
}children: [...] (1)
Element {...}
- start: 1126
- end: 1184
- type: "Element"
- name: "div"
attributes: [...] (2)
Attribute {...}
- start: 1131
- end: 1146
- type: "Attribute"
- name: "class"
value: [...] (1)
Text {...}
- start: 1138
- end: 1145
- type: "Text"
- raw: "palette"
- data: "palette"
}
]
} StyleDirective {...}
- start: 1147
- end: 1177
- type: "StyleDirective"
- name: "background-color"
value: [...] (1)
MustacheTag {...}
- start: 1170
- end: 1177
- type: "MustacheTag"
expression: Identifier {...}
- type: "Identifier"
- start: 1171
- end: 1176
loc: {...}
start: {...}
- line: 47
- column: 49
}end: {...}
- line: 47
- column: 54
}
}- name: "color"
}
}
]
}
]- children: []
}
]context: Identifier {...}
- type: "Identifier"
- name: "color"
- start: 1115
- end: 1120
}
} Text {...}
- start: 1195
- end: 1199
- type: "Text"
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
}
]
} Text {...}
- start: 1205
- end: 1209
- type: "Text"
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
} Element {...}
- start: 1209
- end: 1481
- type: "Element"
- name: "form"
attributes: [...] (2)
Attribute {...}
- start: 1215
- end: 1227
- type: "Attribute"
- name: "class"
value: [...] (1)
Text {...}
- start: 1222
- end: 1226
- type: "Text"
- raw: "seed"
- data: "seed"
}
]
} EventHandler {...}
- start: 1228
- end: 1262
- type: "EventHandler"
- name: "submit"
modifiers: [...] (1)
- "preventDefault"
]expression: Identifier {...}
- type: "Identifier"
- start: 1254
- end: 1261
loc: {...}
start: {...}
- line: 50
- column: 48
}end: {...}
- line: 50
- column: 55
}
}- name: "setSeed"
}
}
]children: [...] (9)
Text {...}
- start: 1263
- end: 1268
- type: "Text"
- raw: "\n\t\t\t\t"
- data: "\n\t\t\t\t"
} Element {...}
- start: 1268
- end: 1305
- type: "Element"
- name: "label"
attributes: [...] (1)
Attribute {...}
- start: 1275
- end: 1285
- type: "Attribute"
- name: "for"
value: [...] (1)
Text {...}
- start: 1280
- end: 1284
- type: "Text"
- raw: "seed"
- data: "seed"
}
]
}
]children: [...] (1)
Text {...}
- start: 1286
- end: 1297
- type: "Text"
- raw: "Random seed"
- data: "Random seed"
}
]
} Text {...}
- start: 1305
- end: 1310
- type: "Text"
- raw: "\n\t\t\t\t"
- data: "\n\t\t\t\t"
} Element {...}
- start: 1310
- end: 1361
- type: "Element"
- name: "input"
attributes: [...] (3)
Attribute {...}
- start: 1317
- end: 1326
- type: "Attribute"
- name: "id"
value: [...] (1)
Text {...}
- start: 1321
- end: 1325
- type: "Text"
- raw: "seed"
- data: "seed"
}
]
} Attribute {...}
- start: 1327
- end: 1338
- type: "Attribute"
- name: "type"
value: [...] (1)
Text {...}
- start: 1333
- end: 1337
- type: "Text"
- raw: "text"
- data: "text"
}
]
} Binding {...}
- start: 1339
- end: 1360
- type: "Binding"
- name: "value"
- modifiers: []
expression: Identifier {...}
- type: "Identifier"
- start: 1351
- end: 1359
loc: {...}
start: {...}
- line: 52
- column: 45
}end: {...}
- line: 52
- column: 53
}
}- name: "seedWord"
}
}
]- children: []
} Text {...}
- start: 1361
- end: 1366
- type: "Text"
- raw: "\n\t\t\t\t"
- data: "\n\t\t\t\t"
} Element {...}
- start: 1366
- end: 1435
- type: "Element"
- name: "button"
attributes: [...] (2)
Attribute {...}
- start: 1374
- end: 1387
- type: "Attribute"
- name: "type"
value: [...] (1)
Text {...}
- start: 1380
- end: 1386
- type: "Text"
- raw: "button"
- data: "button"
}
]
} EventHandler {...}
- start: 1388
- end: 1406
- type: "EventHandler"
- name: "click"
- modifiers: []
expression: Identifier {...}
- type: "Identifier"
- start: 1398
- end: 1405
loc: {...}
start: {...}
- line: 53
- column: 36
}end: {...}
- line: 53
- column: 43
}
}- name: "newSeed"
}
}
]children: [...] (1)
Text {...}
- start: 1407
- end: 1426
- type: "Text"
- raw: "\n\t\t\t\t\tNew seed\n\t\t\t\t"
- data: "\n\t\t\t\t\tNew seed\n\t\t\t\t"
}
]
} Text {...}
- start: 1435
- end: 1440
- type: "Text"
- raw: "\n\t\t\t\t"
- data: "\n\t\t\t\t"
} Element {...}
- start: 1440
- end: 1470
- type: "Element"
- name: "button"
- attributes: []
children: [...] (1)
Text {...}
- start: 1448
- end: 1461
- type: "Text"
- raw: "\n\t\t\t\t\tGo\n\t\t\t\t"
- data: "\n\t\t\t\t\tGo\n\t\t\t\t"
}
]
} Text {...}
- start: 1470
- end: 1474
- type: "Text"
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
}
]
} Text {...}
- start: 1481
- end: 1484
- type: "Text"
- raw: "\n\t\t"
- data: "\n\t\t"
}
]
} Text {...}
- start: 1490
- end: 1492
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
} KeyBlock {...}
- start: 1492
- end: 1541
- type: "KeyBlock"
expression: Identifier {...}
- type: "Identifier"
- start: 1498
- end: 1505
loc: {...}
start: {...}
- line: 61
- column: 7
}end: {...}
- line: 61
- column: 14
}
}- name: "counter"
}children: [...] (1)
InlineComponent {...}
- start: 1509
- end: 1532
- type: "InlineComponent"
- name: "Grid"
attributes: [...] (1)
Attribute {...}
- start: 1515
- end: 1529
- type: "Attribute"
- name: "colorPalette"
value: [...] (1)
AttributeShorthand {...}
- start: 1516
- end: 1528
- type: "AttributeShorthand"
expression: Identifier {...}
- start: 1516
- end: 1528
- type: "Identifier"
- name: "colorPalette"
}
}
]
}
]- children: []
}
]
} Text {...}
- start: 1541
- end: 1543
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
}
]
} Text {...}
- start: 1549
- end: 1552
- type: "Text"
- raw: "\n\t\n"
- data: "\n\t\n"
}
]
} Text {...}
- start: 1558
- end: 1560
- type: "Text"
- raw: "\n\n"
- data: "\n\n"
} Element {...}
- start: 1560
- end: 1973
- type: "Element"
- name: "button"
attributes: [...] (4)
Attribute {...}
- start: 1568
- end: 1582
- type: "Attribute"
- name: "class"
value: [...] (1)
Text {...}
- start: 1575
- end: 1581
- type: "Text"
- raw: "button"
- data: "button"
}
]
} Attribute {...}
- start: 1583
- end: 1606
- type: "Attribute"
- name: "aria-label"
value: [...] (1)
Text {...}
- start: 1595
- end: 1605
- type: "Text"
- raw: "Regenerate"
- data: "Regenerate"
}
]
} Attribute {...}
- start: 1607
- end: 1620
- type: "Attribute"
- name: "type"
value: [...] (1)
Text {...}
- start: 1613
- end: 1619
- type: "Text"
- raw: "button"
- data: "button"
}
]
} EventHandler {...}
- start: 1621
- end: 1642
- type: "EventHandler"
- name: "click"
- modifiers: []
expression: Identifier {...}
- type: "Identifier"
- start: 1631
- end: 1641
loc: {...}
start: {...}
- line: 68
- column: 71
}end: {...}
- line: 68
- column: 81
}
}- name: "regenerate"
}
}
]children: [...] (5)
Text {...}
- start: 1643
- end: 1645
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
} Element {...}
- start: 1645
- end: 1937
- type: "Element"
- name: "svg"
attributes: [...] (4)
Attribute {...}
- start: 1650
- end: 1684
- type: "Attribute"
- name: "xmlns"
value: [...] (1)
Text {...}
- start: 1657
- end: 1683
- type: "Text"
- raw: "http://www.w3.org/2000/svg"
- data: "http://www.w3.org/2000/svg"
}
]
} Attribute {...}
- start: 1685
- end: 1696
- type: "Attribute"
- name: "fill"
value: [...] (1)
Text {...}
- start: 1691
- end: 1695
- type: "Text"
- raw: "none"
- data: "none"
}
]
} Attribute {...}
- start: 1697
- end: 1716
- type: "Attribute"
- name: "viewBox"
value: [...] (1)
Text {...}
- start: 1706
- end: 1715
- type: "Text"
- raw: "0 0 24 24"
- data: "0 0 24 24"
}
]
} Attribute {...}
- start: 1717
- end: 1738
- type: "Attribute"
- name: "stroke"
value: [...] (1)
Text {...}
- start: 1725
- end: 1737
- type: "Text"
- raw: "currentColor"
- data: "currentColor"
}
]
}
]children: [...] (3)
Text {...}
- start: 1739
- end: 1744
- type: "Text"
- raw: "\n "
- data: "\n "
} Element {...}
- start: 1744
- end: 1928
- type: "Element"
- name: "path"
attributes: [...] (4)
Attribute {...}
- start: 1750
- end: 1772
- type: "Attribute"
- name: "stroke-linecap"
value: [...] (1)
Text {...}
- start: 1766
- end: 1771
- type: "Text"
- raw: "round"
- data: "round"
}
]
} Attribute {...}
- start: 1773
- end: 1796
- type: "Attribute"
- name: "stroke-linejoin"
value: [...] (1)
Text {...}
- start: 1790
- end: 1795
- type: "Text"
- raw: "round"
- data: "round"
}
]
} Attribute {...}
- start: 1797
- end: 1813
- type: "Attribute"
- name: "stroke-width"
value: [...] (1)
Text {...}
- start: 1811
- end: 1812
- type: "Text"
- raw: "2"
- data: "2"
}
]
} Attribute {...}
- start: 1814
- end: 1925
- type: "Attribute"
- name: "d"
value: [...] (1)
Text {...}
- start: 1817
- end: 1924
- type: "Text"
- raw: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
- data: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
}
]
}
]- children: []
} Text {...}
- start: 1928
- end: 1931
- type: "Text"
- raw: "\n "
- data: "\n "
}
]
} Text {...}
- start: 1937
- end: 1940
- type: "Text"
- raw: " \n\t"
- data: " \n\t"
} Element {...}
- start: 1940
- end: 1963
- type: "Element"
- name: "span"
- attributes: []
children: [...] (1)
Text {...}
- start: 1946
- end: 1956
- type: "Text"
- raw: "Regenerate"
- data: "Regenerate"
}
]
} Text {...}
- start: 1963
- end: 1964
- type: "Text"
- raw: "\n"
- data: "\n"
}
]
} Text {...}
- start: 1973
- end: 1975
- type: "Text"
- raw: "\n\n"
- data: "\n\n"
}
]
}css: Style {...}
- type: "Style"
- start: 1975
- end: 3470
- attributes: []
children: [...] (16)
Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "seed"
- start: 1984
- end: 1989
}
]- start: 1984
- end: 1989
}
]- start: 1984
- end: 1989
}block: Block {...}
- type: "Block"
children: [...] (1)
Declaration {...}
- type: "Declaration"
- important: false
- property: "position"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "relative"
- start: 2004
- end: 2012
}
]- start: 2004
- end: 2012
}- start: 1994
- end: 2012
}
]- start: 1990
- end: 2016
}- start: 1984
- end: 2016
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "top"
- start: 2020
- end: 2024
}
]- start: 2020
- end: 2024
}
]- start: 2020
- end: 2024
}block: Block {...}
- type: "Block"
children: [...] (5)
Declaration {...}
- type: "Declaration"
- important: false
- property: "display"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "flex"
- start: 2038
- end: 2042
}
]- start: 2038
- end: 2042
}- start: 2029
- end: 2042
} Declaration {...}
- type: "Declaration"
- important: false
- property: "gap"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "1"
- unit: "rem"
- start: 2051
- end: 2055
}
]- start: 2051
- end: 2055
}- start: 2046
- end: 2055
} Declaration {...}
- type: "Declaration"
- important: false
- property: "flex-wrap"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "wrap"
- start: 2070
- end: 2074
}
]- start: 2070
- end: 2074
}- start: 2059
- end: 2074
} Declaration {...}
- type: "Declaration"
- important: false
- property: "align-items"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "start"
- start: 2091
- end: 2096
}
]- start: 2091
- end: 2096
}- start: 2078
- end: 2096
} Declaration {...}
- type: "Declaration"
- important: false
- property: "justify-content"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "space-between"
- start: 2117
- end: 2130
}
]- start: 2117
- end: 2130
}- start: 2100
- end: 2130
}
]- start: 2025
- end: 2134
}- start: 2020
- end: 2134
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "input"
- start: 2138
- end: 2143
}
]- start: 2138
- end: 2143
}
]- start: 2138
- end: 2143
}block: Block {...}
- type: "Block"
children: [...] (1)
Declaration {...}
- type: "Declaration"
- important: false
- property: "font-size"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "1"
- unit: "rem"
- start: 2159
- end: 2163
}
]- start: 2159
- end: 2163
}- start: 2148
- end: 2163
}
]- start: 2144
- end: 2167
}- start: 2138
- end: 2167
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "label"
- start: 2171
- end: 2176
}
]- start: 2171
- end: 2176
}
]- start: 2171
- end: 2176
}block: Block {...}
- type: "Block"
children: [...] (4)
Declaration {...}
- type: "Declaration"
- important: false
- property: "color"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "white"
- start: 2188
- end: 2193
}
]- start: 2188
- end: 2193
}- start: 2181
- end: 2193
} Declaration {...}
- type: "Declaration"
- important: false
- property: "position"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "absolute"
- start: 2207
- end: 2215
}
]- start: 2207
- end: 2215
}- start: 2197
- end: 2215
} Declaration {...}
- type: "Declaration"
- important: false
- property: "top"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "-1"
- unit: "rem"
- start: 2224
- end: 2229
}
]- start: 2224
- end: 2229
}- start: 2219
- end: 2229
} Declaration {...}
- type: "Declaration"
- important: false
- property: "font-size"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "0.75"
- unit: "rem"
- start: 2244
- end: 2251
}
]- start: 2244
- end: 2251
}- start: 2233
- end: 2251
}
]- start: 2177
- end: 2255
}- start: 2171
- end: 2255
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
PseudoClassSelector {...}
- type: "PseudoClassSelector"
- name: "global"
children: [...] (1)
Raw {...}
- type: "Raw"
- value: "*"
- start: 2266
- end: 2267
}
]- start: 2258
- end: 2268
}
]- start: 2258
- end: 2268
}
]- start: 2258
- end: 2268
}block: Block {...}
- type: "Block"
children: [...] (1)
Declaration {...}
- type: "Declaration"
- important: false
- property: "box-sizing"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "border-box"
- start: 2285
- end: 2295
}
]- start: 2285
- end: 2295
}- start: 2273
- end: 2295
}
]- start: 2269
- end: 2299
}- start: 2258
- end: 2299
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
PseudoClassSelector {...}
- type: "PseudoClassSelector"
- name: "global"
children: [...] (1)
Raw {...}
- type: "Raw"
- value: "body"
- start: 2310
- end: 2314
}
]- start: 2302
- end: 2315
}
]- start: 2302
- end: 2315
}
]- start: 2302
- end: 2315
}block: Block {...}
- type: "Block"
children: [...] (2)
Declaration {...}
- type: "Declaration"
- important: false
- property: "position"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "relative"
- start: 2330
- end: 2338
}
]- start: 2330
- end: 2338
}- start: 2320
- end: 2338
} Declaration {...}
- type: "Declaration"
- important: false
- property: "padding"
value: Value {...}
- type: "Value"
children: [...] (1)
Number {...}
- type: "Number"
- value: "0"
- start: 2351
- end: 2352
}
]- start: 2351
- end: 2352
}- start: 2342
- end: 2352
}
]- start: 2316
- end: 2356
}- start: 2302
- end: 2356
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "button"
- start: 2359
- end: 2366
}
]- start: 2359
- end: 2366
}
]- start: 2359
- end: 2366
}block: Block {...}
- type: "Block"
children: [...] (17)
Declaration {...}
- type: "Declaration"
- important: false
- property: "position"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "absolute"
- start: 2381
- end: 2389
}
]- start: 2381
- end: 2389
}- start: 2371
- end: 2389
} Declaration {...}
- type: "Declaration"
- important: false
- property: "bottom"
value: Value {...}
- type: "Value"
children: [...] (1)
Number {...}
- type: "Number"
- value: "0"
- start: 2401
- end: 2402
}
]- start: 2401
- end: 2402
}- start: 2393
- end: 2402
} Declaration {...}
- type: "Declaration"
- important: false
- property: "right"
value: Value {...}
- type: "Value"
children: [...] (1)
Number {...}
- type: "Number"
- value: "0"
- start: 2413
- end: 2414
}
]- start: 2413
- end: 2414
}- start: 2406
- end: 2414
} Declaration {...}
- type: "Declaration"
- important: false
- property: "padding"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "0.5"
- unit: "rem"
- start: 2427
- end: 2433
}
]- start: 2427
- end: 2433
}- start: 2418
- end: 2433
} Declaration {...}
- type: "Declaration"
- important: false
- property: "margin"
value: Value {...}
- type: "Value"
children: [...] (1)
Number {...}
- type: "Number"
- value: "0"
- start: 2445
- end: 2446
}
]- start: 2445
- end: 2446
}- start: 2437
- end: 2446
} Declaration {...}
- type: "Declaration"
- important: false
- property: "border-top-left-radius"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "12"
- unit: "px"
- start: 2474
- end: 2478
}
]- start: 2474
- end: 2478
}- start: 2450
- end: 2478
} Declaration {...}
- type: "Declaration"
- important: false
- property: "background"
value: Value {...}
- type: "Value"
children: [...] (1)
Hash {...}
- type: "Hash"
- value: "ffffffcc"
- start: 2494
- end: 2503
}
]- start: 2494
- end: 2503
}- start: 2482
- end: 2503
} Declaration {...}
- type: "Declaration"
- important: false
- property: "border"
value: Value {...}
- type: "Value"
children: [...] (5)
Dimension {...}
- type: "Dimension"
- value: "0.5"
- unit: "px"
- start: 2515
- end: 2520
} WhiteSpace {...}
- type: "WhiteSpace"
- loc: null
- value: " "
} Identifier {...}
- type: "Identifier"
- name: "solid"
- start: 2521
- end: 2526
} WhiteSpace {...}
- type: "WhiteSpace"
- loc: null
- value: " "
} Hash {...}
- type: "Hash"
- value: "555555cc"
- start: 2527
- end: 2536
}
]- start: 2515
- end: 2536
}- start: 2507
- end: 2536
} Declaration {...}
- type: "Declaration"
- important: false
- property: "line-height"
value: Value {...}
- type: "Value"
children: [...] (1)
Number {...}
- type: "Number"
- value: "1"
- start: 2553
- end: 2554
}
]- start: 2553
- end: 2554
}- start: 2540
- end: 2554
} Declaration {...}
- type: "Declaration"
- important: false
- property: "cursor"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "pointer"
- start: 2566
- end: 2573
}
]- start: 2566
- end: 2573
}- start: 2558
- end: 2573
} Declaration {...}
- type: "Declaration"
- important: false
- property: "display"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "flex"
- start: 2586
- end: 2590
}
]- start: 2586
- end: 2590
}- start: 2577
- end: 2590
} Declaration {...}
- type: "Declaration"
- important: false
- property: "align-items"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "center"
- start: 2607
- end: 2613
}
]- start: 2607
- end: 2613
}- start: 2594
- end: 2613
} Declaration {...}
- type: "Declaration"
- important: false
- property: "justify-content"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "center"
- start: 2634
- end: 2640
}
]- start: 2634
- end: 2640
}- start: 2617
- end: 2640
} Declaration {...}
- type: "Declaration"
- important: false
- property: "gap"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "0.25"
- unit: "rem"
- start: 2649
- end: 2656
}
]- start: 2649
- end: 2656
}- start: 2644
- end: 2656
} Declaration {...}
- type: "Declaration"
- important: false
- property: "font-weight"
value: Value {...}
- type: "Value"
children: [...] (1)
Number {...}
- type: "Number"
- value: "600"
- start: 2673
- end: 2676
}
]- start: 2673
- end: 2676
}- start: 2660
- end: 2676
} Declaration {...}
- type: "Declaration"
- important: false
- property: "color"
value: Value {...}
- type: "Value"
children: [...] (1)
Hash {...}
- type: "Hash"
- value: "333"
- start: 2687
- end: 2691
}
]- start: 2687
- end: 2691
}- start: 2680
- end: 2691
} Declaration {...}
- type: "Declaration"
- important: false
- property: "font-size"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "0.75"
- unit: "rem"
- start: 2706
- end: 2713
}
]- start: 2706
- end: 2713
}- start: 2695
- end: 2713
}
]- start: 2367
- end: 2717
}- start: 2359
- end: 2717
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (3)
ClassSelector {...}
- type: "ClassSelector"
- name: "button"
- start: 2721
- end: 2728
} WhiteSpace {...}
- type: "WhiteSpace"
- loc: null
- value: " "
} TypeSelector {...}
- type: "TypeSelector"
- name: "svg"
- start: 2729
- end: 2732
}
]- start: 2721
- end: 2732
}
]- start: 2721
- end: 2732
}block: Block {...}
- type: "Block"
children: [...] (2)
Declaration {...}
- type: "Declaration"
- important: false
- property: "width"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "1.25"
- unit: "rem"
- start: 2746
- end: 2753
}
]- start: 2746
- end: 2753
}- start: 2739
- end: 2753
} Declaration {...}
- type: "Declaration"
- important: false
- property: "transition"
value: Value {...}
- type: "Value"
children: [...] (5)
Dimension {...}
- type: "Dimension"
- value: "0.3"
- unit: "s"
- start: 2771
- end: 2775
} WhiteSpace {...}
- type: "WhiteSpace"
- loc: null
- value: " "
} Identifier {...}
- type: "Identifier"
- name: "ease-in-out"
- start: 2776
- end: 2787
} WhiteSpace {...}
- type: "WhiteSpace"
- loc: null
- value: " "
} Identifier {...}
- type: "Identifier"
- name: "transform"
- start: 2788
- end: 2797
}
]- start: 2771
- end: 2797
}- start: 2759
- end: 2797
}
]- start: 2733
- end: 2802
}- start: 2721
- end: 2802
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (4)
ClassSelector {...}
- type: "ClassSelector"
- name: "button"
- start: 2806
- end: 2813
} PseudoClassSelector {...}
- type: "PseudoClassSelector"
- name: "hover"
- children: null
- start: 2813
- end: 2819
} WhiteSpace {...}
- type: "WhiteSpace"
- loc: null
- value: " "
} TypeSelector {...}
- type: "TypeSelector"
- name: "svg"
- start: 2820
- end: 2823
}
]- start: 2806
- end: 2823
}
]- start: 2806
- end: 2823
}block: Block {...}
- type: "Block"
children: [...] (1)
Declaration {...}
- type: "Declaration"
- important: false
- property: "transform"
value: Value {...}
- type: "Value"
children: [...] (1)
Function {...}
- type: "Function"
- name: "rotate"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "-45"
- unit: "deg"
- start: 2848
- end: 2854
}
]- start: 2841
- end: 2855
}
]- start: 2841
- end: 2855
}- start: 2830
- end: 2855
}
]- start: 2824
- end: 2860
}- start: 2806
- end: 2860
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
children: [...] (2)
Selector {...}
- type: "Selector"
children: [...] (2)
PseudoClassSelector {...}
- type: "PseudoClassSelector"
- name: "is"
children: [...] (1)
Raw {...}
- type: "Raw"
- value: "input, button"
- start: 2868
- end: 2881
}
]- start: 2864
- end: 2882
} PseudoClassSelector {...}
- type: "PseudoClassSelector"
- name: "focus"
- children: null
- start: 2882
- end: 2888
}
]- start: 2864
- end: 2888
} Selector {...}
- type: "Selector"
children: [...] (2)
PseudoClassSelector {...}
- type: "PseudoClassSelector"
- name: "is"
children: [...] (1)
Raw {...}
- type: "Raw"
- value: "input, button"
- start: 2896
- end: 2909
}
]- start: 2892
- end: 2910
} PseudoClassSelector {...}
- type: "PseudoClassSelector"
- name: "active"
- children: null
- start: 2910
- end: 2917
}
]- start: 2892
- end: 2917
}
]- start: 2864
- end: 2917
}block: Block {...}
- type: "Block"
children: [...] (1)
Declaration {...}
- type: "Declaration"
- important: false
- property: "outline"
value: Value {...}
- type: "Value"
children: [...] (5)
Dimension {...}
- type: "Dimension"
- value: "2"
- unit: "px"
- start: 2933
- end: 2936
} WhiteSpace {...}
- type: "WhiteSpace"
- loc: null
- value: " "
} Identifier {...}
- type: "Identifier"
- name: "solid"
- start: 2937
- end: 2942
} WhiteSpace {...}
- type: "WhiteSpace"
- loc: null
- value: " "
} Hash {...}
- type: "Hash"
- value: "f06"
- start: 2943
- end: 2947
}
]- start: 2933
- end: 2947
}- start: 2924
- end: 2947
}
]- start: 2918
- end: 2953
}- start: 2864
- end: 2953
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
children: [...] (2)
Selector {...}
- type: "Selector"
children: [...] (4)
ClassSelector {...}
- type: "ClassSelector"
- name: "button"
- start: 2957
- end: 2964
} PseudoClassSelector {...}
- type: "PseudoClassSelector"
- name: "focus"
- children: null
- start: 2964
- end: 2970
} WhiteSpace {...}
- type: "WhiteSpace"
- loc: null
- value: " "
} TypeSelector {...}
- type: "TypeSelector"
- name: "svg"
- start: 2971
- end: 2974
}
]- start: 2957
- end: 2974
} Selector {...}
- type: "Selector"
children: [...] (4)
ClassSelector {...}
- type: "ClassSelector"
- name: "button"
- start: 2977
- end: 2984
} PseudoClassSelector {...}
- type: "PseudoClassSelector"
- name: "active"
- children: null
- start: 2984
- end: 2991
} WhiteSpace {...}
- type: "WhiteSpace"
- loc: null
- value: " "
} TypeSelector {...}
- type: "TypeSelector"
- name: "svg"
- start: 2992
- end: 2995
}
]- start: 2977
- end: 2995
}
]- start: 2957
- end: 2995
}block: Block {...}
- type: "Block"
children: [...] (1)
Declaration {...}
- type: "Declaration"
- important: false
- property: "transform"
value: Value {...}
- type: "Value"
children: [...] (1)
Function {...}
- type: "Function"
- name: "rotate"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "-90"
- unit: "deg"
- start: 3020
- end: 3026
}
]- start: 3013
- end: 3027
}
]- start: 3013
- end: 3027
}- start: 3002
- end: 3027
}
]- start: 2996
- end: 3031
}- start: 2957
- end: 3031
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "container"
- start: 3035
- end: 3045
}
]- start: 3035
- end: 3045
}
]- start: 3035
- end: 3045
}block: Block {...}
- type: "Block"
children: [...] (3)
Declaration {...}
- type: "Declaration"
- important: false
- property: "height"
value: Value {...}
- type: "Value"
children: [...] (1)
Percentage {...}
- type: "Percentage"
- value: "100"
- start: 3058
- end: 3062
}
]- start: 3058
- end: 3062
}- start: 3050
- end: 3062
} Declaration {...}
- type: "Declaration"
- important: false
- property: "padding"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "1"
- unit: "rem"
- start: 3075
- end: 3079
}
]- start: 3075
- end: 3079
}- start: 3066
- end: 3079
} Declaration {...}
- type: "Declaration"
- important: false
- property: "background-image"
value: Value {...}
- type: "Value"
children: [...] (1)
Function {...}
- type: "Function"
- name: "radial-gradient"
children: [...] (7)
Function {...}
- type: "Function"
- name: "var"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "--bg-inner"
- start: 3121
- end: 3131
}
]- start: 3117
- end: 3132
} WhiteSpace {...}
- type: "WhiteSpace"
- loc: null
- value: " "
} Percentage {...}
- type: "Percentage"
- value: "0"
- start: 3133
- end: 3135
} Operator {...}
- type: "Operator"
- value: ","
- start: 3135
- end: 3136
} Function {...}
- type: "Function"
- name: "var"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "--bg-outer"
- start: 3141
- end: 3151
}
]- start: 3137
- end: 3152
} WhiteSpace {...}
- type: "WhiteSpace"
- loc: null
- value: " "
} Percentage {...}
- type: "Percentage"
- value: "100"
- start: 3153
- end: 3157
}
]- start: 3101
- end: 3158
}
]- start: 3101
- end: 3158
}- start: 3083
- end: 3158
}
]- start: 3046
- end: 3162
}- start: 3035
- end: 3162
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "grid"
- start: 3166
- end: 3171
}
]- start: 3166
- end: 3171
}
]- start: 3166
- end: 3171
}block: Block {...}
- type: "Block"
children: [...] (3)
Declaration {...}
- type: "Declaration"
- important: false
- property: "display"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "grid"
- start: 3185
- end: 3189
}
]- start: 3185
- end: 3189
}- start: 3176
- end: 3189
} Declaration {...}
- type: "Declaration"
- important: false
- property: "grid-template-rows"
value: Value {...}
- type: "Value"
children: [...] (5)
Dimension {...}
- type: "Dimension"
- value: "5"
- unit: "rem"
- start: 3213
- end: 3217
} WhiteSpace {...}
- type: "WhiteSpace"
- loc: null
- value: " "
} Identifier {...}
- type: "Identifier"
- name: "auto"
- start: 3218
- end: 3222
} WhiteSpace {...}
- type: "WhiteSpace"
- loc: null
- value: " "
} Dimension {...}
- type: "Dimension"
- value: "2"
- unit: "rem"
- start: 3223
- end: 3227
}
]- start: 3213
- end: 3227
}- start: 3193
- end: 3227
} Declaration {...}
- type: "Declaration"
- important: false
- property: "height"
value: Value {...}
- type: "Value"
children: [...] (1)
Percentage {...}
- type: "Percentage"
- value: "100"
- start: 3239
- end: 3243
}
]- start: 3239
- end: 3243
}- start: 3231
- end: 3243
}
]- start: 3172
- end: 3247
}- start: 3166
- end: 3247
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (4)
ClassSelector {...}
- type: "ClassSelector"
- name: "grid"
- start: 3251
- end: 3256
} Combinator {...}
- type: "Combinator"
- name: ">"
- start: 3257
- end: 3258
} PseudoClassSelector {...}
- type: "PseudoClassSelector"
- name: "global"
children: [...] (1)
Raw {...}
- type: "Raw"
- value: "*"
- start: 3267
- end: 3268
}
]- start: 3259
- end: 3269
} PseudoClassSelector {...}
- type: "PseudoClassSelector"
- name: "not"
children: [...] (1)
SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "top"
- start: 3274
- end: 3278
}
]- start: 3274
- end: 3278
}
]- start: 3274
- end: 3278
}
]- start: 3269
- end: 3279
}
]- start: 3251
- end: 3279
}
]- start: 3251
- end: 3279
}block: Block {...}
- type: "Block"
children: [...] (2)
Declaration {...}
- type: "Declaration"
- important: false
- property: "grid-column"
value: Value {...}
- type: "Value"
children: [...] (3)
Number {...}
- type: "Number"
- value: "1"
- start: 3328
- end: 3329
} Operator {...}
- type: "Operator"
- value: "/"
- start: 3329
- end: 3330
} Number {...}
- type: "Number"
- value: "2"
- start: 3330
- end: 3331
}
]- start: 3328
- end: 3331
}- start: 3315
- end: 3331
} Declaration {...}
- type: "Declaration"
- important: false
- property: "grid-row"
value: Value {...}
- type: "Value"
children: [...] (3)
Number {...}
- type: "Number"
- value: "2"
- start: 3346
- end: 3347
} Operator {...}
- type: "Operator"
- value: "/"
- start: 3347
- end: 3348
} Number {...}
- type: "Number"
- value: "3"
- start: 3348
- end: 3349
}
]- start: 3346
- end: 3349
}- start: 3336
- end: 3349
}
]- start: 3280
- end: 3353
}- start: 3251
- end: 3353
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "colors"
- start: 3357
- end: 3364
}
]- start: 3357
- end: 3364
}
]- start: 3357
- end: 3364
}block: Block {...}
- type: "Block"
children: [...] (2)
Declaration {...}
- type: "Declaration"
- important: false
- property: "display"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "flex"
- start: 3378
- end: 3382
}
]- start: 3378
- end: 3382
}- start: 3369
- end: 3382
} Declaration {...}
- type: "Declaration"
- important: false
- property: "border"
value: Value {...}
- type: "Value"
children: [...] (5)
Dimension {...}
- type: "Dimension"
- value: "1"
- unit: "px"
- start: 3394
- end: 3397
} WhiteSpace {...}
- type: "WhiteSpace"
- loc: null
- value: " "
} Identifier {...}
- type: "Identifier"
- name: "solid"
- start: 3398
- end: 3403
} WhiteSpace {...}
- type: "WhiteSpace"
- loc: null
- value: " "
} Identifier {...}
- type: "Identifier"
- name: "black"
- start: 3404
- end: 3409
}
]- start: 3394
- end: 3409
}- start: 3386
- end: 3409
}
]- start: 3365
- end: 3413
}- start: 3357
- end: 3413
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "palette"
- start: 3417
- end: 3425
}
]- start: 3417
- end: 3425
}
]- start: 3417
- end: 3425
}block: Block {...}
- type: "Block"
children: [...] (2)
Declaration {...}
- type: "Declaration"
- important: false
- property: "height"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "20"
- unit: "px"
- start: 3438
- end: 3442
}
]- start: 3438
- end: 3442
}- start: 3430
- end: 3442
} Declaration {...}
- type: "Declaration"
- important: false
- property: "width"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "20"
- unit: "px"
- start: 3453
- end: 3457
}
]- start: 3453
- end: 3457
}- start: 3446
- end: 3457
}
]- start: 3426
- end: 3461
}- start: 3417
- end: 3461
}
]content: {...}
- start: 1982
- end: 3462
- styles: "\n\t.seed {\n\t\tposition: relative;\n\t}\n\t\n\t.top {\n\t\tdisplay: flex;\n\t\tgap: 1rem;\n\t\tflex-wrap: wrap;\n\t\talign-items: start;\n\t\tjustify-content: space-between;\n\t}\n\t\n\tinput {\n\t\tfont-size: 1rem;\n\t}\n\t\n\tlabel {\n\t\tcolor: white;\n\t\tposition: absolute;\n\t\ttop: -1rem;\n\t\tfont-size: 0.75rem;\n\t}\n\n\t:global(*) {\n\t\tbox-sizing: border-box;\n\t}\n\n\t:global(body) {\n\t\tposition: relative;\n\t\tpadding: 0;\n\t}\n\n\t.button {\n\t\tposition: absolute;\n\t\tbottom: 0;\n\t\tright: 0;\n\t\tpadding: 0.5rem;\n\t\tmargin: 0;\n\t\tborder-top-left-radius: 12px;\n\t\tbackground: #ffffffcc;\n\t\tborder: 0.5px solid #555555cc;\n\t\tline-height: 1;\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tgap: 0.25rem;\n\t\tfont-weight: 600;\n\t\tcolor: #333;\n\t\tfont-size: 0.75rem;\n\t}\n\t\n\t.button svg {\n width: 1.25rem;\n transition: 0.3s ease-in-out transform;\n }\n\n .button:hover svg {\n transform: rotate(-45deg);\n }\n\n :is(input, button):focus,\n :is(input, button):active {\n outline: 2px solid #f06; \n }\n\t\n\t.button:focus svg,\n\t.button:active svg {\n transform: rotate(-90deg);\n\t}\n\t\n\t.container {\n\t\theight: 100%;\n\t\tpadding: 1rem;\n\t\tbackground-image: radial-gradient(var(--bg-inner) 0%, var(--bg-outer) 100%);\n\t}\n\t\n\t.grid {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: 5rem auto 2rem;\n\t\theight: 100%;\n\t}\n\t\n\t.grid > :global(*):not(.top) {\n\t\t/* transition enforcement */\n\t\tgrid-column: 1/2;\n \tgrid-row: 2/3;\n\t}\n\t\n\t.colors {\n\t\tdisplay: flex;\n\t\tborder: 1px solid black;\n\t}\n\t\n\t.palette {\n\t\theight: 20px;\n\t\twidth: 20px;\n\t}\n"
}
}instance: Script {...}
- type: "Script"
- start: 0
- end: 943
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 934
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 40
- column: 0
}
}body: [...] (16)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 73
- end: 106
loc: {...}
start: {...}
- line: 3
- column: 1
}end: {...}
- line: 3
- column: 34
}
}specifiers: [...] (1)
ImportDefaultSpecifier {...}
- type: "ImportDefaultSpecifier"
- start: 80
- end: 84
loc: {...}
start: {...}
- line: 3
- column: 8
}end: {...}
- line: 3
- column: 12
}
}local: Identifier {...}
- type: "Identifier"
- start: 80
- end: 84
loc: {...}
start: {...}
- line: 3
- column: 8
}end: {...}
- line: 3
- column: 12
}
}- name: "Grid"
}
}
]source: Literal {...}
- type: "Literal"
- start: 90
- end: 105
loc: {...}
start: {...}
- line: 3
- column: 18
}end: {...}
- line: 3
- column: 33
}
}- value: "./Grid.svelte"
- raw: "'./Grid.svelte'"
}leadingComments: [...] (1)
Line {...}
- type: "Line"
- value: " based on https://frontend.horse/articles/generative-grids/"
- start: 10
- end: 71
- has_trailing_newline: true
}
]
} ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 108
- end: 209
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 4
- column: 102
}
}specifiers: [...] (5)
ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 117
- end: 123
loc: {...}
start: {...}
- line: 4
- column: 10
}end: {...}
- line: 4
- column: 16
}
}imported: Identifier {...}
- type: "Identifier"
- start: 117
- end: 123
loc: {...}
start: {...}
- line: 4
- column: 10
}end: {...}
- line: 4
- column: 16
}
}- name: "random"
}local: Identifier {...}
- type: "Identifier"
- start: 117
- end: 123
loc: {...}
start: {...}
- line: 4
- column: 10
}end: {...}
- line: 4
- column: 16
}
}- name: "random"
}
} ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 125
- end: 131
loc: {...}
start: {...}
- line: 4
- column: 18
}end: {...}
- line: 4
- column: 24
}
}imported: Identifier {...}
- type: "Identifier"
- start: 125
- end: 131
loc: {...}
start: {...}
- line: 4
- column: 18
}end: {...}
- line: 4
- column: 24
}
}- name: "colors"
}local: Identifier {...}
- type: "Identifier"
- start: 125
- end: 131
loc: {...}
start: {...}
- line: 4
- column: 18
}end: {...}
- line: 4
- column: 24
}
}- name: "colors"
}
} ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 133
- end: 162
loc: {...}
start: {...}
- line: 4
- column: 26
}end: {...}
- line: 4
- column: 55
}
}imported: Identifier {...}
- type: "Identifier"
- start: 133
- end: 147
loc: {...}
start: {...}
- line: 4
- column: 26
}end: {...}
- line: 4
- column: 40
}
}- name: "interpolateLab"
}local: Identifier {...}
- type: "Identifier"
- start: 151
- end: 162
loc: {...}
start: {...}
- line: 4
- column: 44
}end: {...}
- line: 4
- column: 55
}
}- name: "interpolate"
}
} ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 164
- end: 175
loc: {...}
start: {...}
- line: 4
- column: 57
}end: {...}
- line: 4
- column: 68
}
}imported: Identifier {...}
- type: "Identifier"
- start: 164
- end: 175
loc: {...}
start: {...}
- line: 4
- column: 57
}end: {...}
- line: 4
- column: 68
}
}- name: "randomWords"
}local: Identifier {...}
- type: "Identifier"
- start: 164
- end: 175
loc: {...}
start: {...}
- line: 4
- column: 57
}end: {...}
- line: 4
- column: 68
}
}- name: "randomWords"
}
} ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 177
- end: 193
loc: {...}
start: {...}
- line: 4
- column: 70
}end: {...}
- line: 4
- column: 86
}
}imported: Identifier {...}
- type: "Identifier"
- start: 177
- end: 185
loc: {...}
start: {...}
- line: 4
- column: 70
}end: {...}
- line: 4
- column: 78
}
}- name: "seedPRNG"
}local: Identifier {...}
- type: "Identifier"
- start: 189
- end: 193
loc: {...}
start: {...}
- line: 4
- column: 82
}end: {...}
- line: 4
- column: 86
}
}- name: "seed"
}
}
]source: Literal {...}
- type: "Literal"
- start: 201
- end: 208
loc: {...}
start: {...}
- line: 4
- column: 94
}end: {...}
- line: 4
- column: 101
}
}- value: "./lib"
- raw: "'./lib'"
}
} ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 211
- end: 258
loc: {...}
start: {...}
- line: 5
- column: 1
}end: {...}
- line: 5
- column: 48
}
}specifiers: [...] (1)
ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 220
- end: 239
loc: {...}
start: {...}
- line: 5
- column: 10
}end: {...}
- line: 5
- column: 29
}
}imported: Identifier {...}
- type: "Identifier"
- start: 220
- end: 239
loc: {...}
start: {...}
- line: 5
- column: 10
}end: {...}
- line: 5
- column: 29
}
}- name: "getBackgroundColors"
}local: Identifier {...}
- type: "Identifier"
- start: 220
- end: 239
loc: {...}
start: {...}
- line: 5
- column: 10
}end: {...}
- line: 5
- column: 29
}
}- name: "getBackgroundColors"
}
}
]source: Literal {...}
- type: "Literal"
- start: 247
- end: 257
loc: {...}
start: {...}
- line: 5
- column: 37
}end: {...}
- line: 5
- column: 47
}
}- value: "./colors"
- raw: "'./colors'"
}
} ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 260
- end: 290
loc: {...}
start: {...}
- line: 6
- column: 1
}end: {...}
- line: 6
- column: 31
}
}specifiers: [...] (1)
ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 269
- end: 273
loc: {...}
start: {...}
- line: 6
- column: 10
}end: {...}
- line: 6
- column: 14
}
}imported: Identifier {...}
- type: "Identifier"
- start: 269
- end: 273
loc: {...}
start: {...}
- line: 6
- column: 10
}end: {...}
- line: 6
- column: 14
}
}- name: "tick"
}local: Identifier {...}
- type: "Identifier"
- start: 269
- end: 273
loc: {...}
start: {...}
- line: 6
- column: 10
}end: {...}
- line: 6
- column: 14
}
}- name: "tick"
}
}
]source: Literal {...}
- type: "Literal"
- start: 281
- end: 289
loc: {...}
start: {...}
- line: 6
- column: 22
}end: {...}
- line: 6
- column: 30
}
}- value: "svelte"
- raw: "'svelte'"
}
} ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 292
- end: 332
loc: {...}
start: {...}
- line: 7
- column: 1
}end: {...}
- line: 7
- column: 41
}
}specifiers: [...] (1)
ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 301
- end: 308
loc: {...}
start: {...}
- line: 7
- column: 10
}end: {...}
- line: 7
- column: 17
}
}imported: Identifier {...}
- type: "Identifier"
- start: 301
- end: 308
loc: {...}
start: {...}
- line: 7
- column: 10
}end: {...}
- line: 7
- column: 17
}
}- name: "tweened"
}local: Identifier {...}
- type: "Identifier"
- start: 301
- end: 308
loc: {...}
start: {...}
- line: 7
- column: 10
}end: {...}
- line: 7
- column: 17
}
}- name: "tweened"
}
}
]source: Literal {...}
- type: "Literal"
- start: 316
- end: 331
loc: {...}
start: {...}
- line: 7
- column: 25
}end: {...}
- line: 7
- column: 40
}
}- value: "svelte/motion"
- raw: "'svelte/motion'"
}
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 334
- end: 350
loc: {...}
start: {...}
- line: 8
- column: 1
}end: {...}
- line: 8
- column: 17
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 338
- end: 349
loc: {...}
start: {...}
- line: 8
- column: 5
}end: {...}
- line: 8
- column: 16
}
}id: Identifier {...}
- type: "Identifier"
- start: 338
- end: 345
loc: {...}
start: {...}
- line: 8
- column: 5
}end: {...}
- line: 8
- column: 12
}
}- name: "counter"
}init: Literal {...}
- type: "Literal"
- start: 348
- end: 349
loc: {...}
start: {...}
- line: 8
- column: 15
}end: {...}
- line: 8
- column: 16
}
}- value: 0
- raw: "0"
}
}
]- kind: "let"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 354
- end: 376
loc: {...}
start: {...}
- line: 10
- column: 1
}end: {...}
- line: 10
- column: 23
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 358
- end: 375
loc: {...}
start: {...}
- line: 10
- column: 5
}end: {...}
- line: 10
- column: 22
}
}id: Identifier {...}
- type: "Identifier"
- start: 358
- end: 370
loc: {...}
start: {...}
- line: 10
- column: 5
}end: {...}
- line: 10
- column: 17
}
}- name: "colorPalette"
}init: ArrayExpression {...}
- type: "ArrayExpression"
- start: 373
- end: 375
loc: {...}
start: {...}
- line: 10
- column: 20
}end: {...}
- line: 10
- column: 22
}
}- elements: []
}
}
]- kind: "let"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 380
- end: 442
loc: {...}
start: {...}
- line: 12
- column: 1
}end: {...}
- line: 12
- column: 63
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 384
- end: 441
loc: {...}
start: {...}
- line: 12
- column: 5
}end: {...}
- line: 12
- column: 62
}
}id: Identifier {...}
- type: "Identifier"
- start: 384
- end: 391
loc: {...}
start: {...}
- line: 12
- column: 5
}end: {...}
- line: 12
- column: 12
}
}- name: "bgInner"
}init: CallExpression {...}
- type: "CallExpression"
- start: 394
- end: 441
loc: {...}
start: {...}
- line: 12
- column: 15
}end: {...}
- line: 12
- column: 62
}
}callee: Identifier {...}
- type: "Identifier"
- start: 394
- end: 401
loc: {...}
start: {...}
- line: 12
- column: 15
}end: {...}
- line: 12
- column: 22
}
}- name: "tweened"
}arguments: [...] (2)
Literal {...}
- type: "Literal"
- start: 402
- end: 408
loc: {...}
start: {...}
- line: 12
- column: 23
}end: {...}
- line: 12
- column: 29
}
}- value: "#fff"
- raw: "'#fff'"
} ObjectExpression {...}
- type: "ObjectExpression"
- start: 410
- end: 440
loc: {...}
start: {...}
- line: 12
- column: 31
}end: {...}
- line: 12
- column: 61
}
}properties: [...] (2)
Property {...}
- type: "Property"
- start: 412
- end: 425
loc: {...}
start: {...}
- line: 12
- column: 33
}end: {...}
- line: 12
- column: 46
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 412
- end: 420
loc: {...}
start: {...}
- line: 12
- column: 33
}end: {...}
- line: 12
- column: 41
}
}- name: "duration"
}value: Literal {...}
- type: "Literal"
- start: 422
- end: 425
loc: {...}
start: {...}
- line: 12
- column: 43
}end: {...}
- line: 12
- column: 46
}
}- value: 500
- raw: "500"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 427
- end: 438
loc: {...}
start: {...}
- line: 12
- column: 48
}end: {...}
- line: 12
- column: 59
}
}- method: false
- shorthand: true
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 427
- end: 438
loc: {...}
start: {...}
- line: 12
- column: 48
}end: {...}
- line: 12
- column: 59
}
}- name: "interpolate"
}- kind: "init"
value: Identifier {...}
- type: "Identifier"
- start: 427
- end: 438
loc: {...}
start: {...}
- line: 12
- column: 48
}end: {...}
- line: 12
- column: 59
}
}- name: "interpolate"
}
}
]
}
]- optional: false
}
}
]- kind: "let"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 444
- end: 506
loc: {...}
start: {...}
- line: 13
- column: 1
}end: {...}
- line: 13
- column: 63
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 448
- end: 505
loc: {...}
start: {...}
- line: 13
- column: 5
}end: {...}
- line: 13
- column: 62
}
}id: Identifier {...}
- type: "Identifier"
- start: 448
- end: 455
loc: {...}
start: {...}
- line: 13
- column: 5
}end: {...}
- line: 13
- column: 12
}
}- name: "bgOuter"
}init: CallExpression {...}
- type: "CallExpression"
- start: 458
- end: 505
loc: {...}
start: {...}
- line: 13
- column: 15
}end: {...}
- line: 13
- column: 62
}
}callee: Identifier {...}
- type: "Identifier"
- start: 458
- end: 465
loc: {...}
start: {...}
- line: 13
- column: 15
}end: {...}
- line: 13
- column: 22
}
}- name: "tweened"
}arguments: [...] (2)
Literal {...}
- type: "Literal"
- start: 466
- end: 472
loc: {...}
start: {...}
- line: 13
- column: 23
}end: {...}
- line: 13
- column: 29
}
}- value: "#fff"
- raw: "'#fff'"
} ObjectExpression {...}
- type: "ObjectExpression"
- start: 474
- end: 504
loc: {...}
start: {...}
- line: 13
- column: 31
}end: {...}
- line: 13
- column: 61
}
}properties: [...] (2)
Property {...}
- type: "Property"
- start: 476
- end: 489
loc: {...}
start: {...}
- line: 13
- column: 33
}end: {...}
- line: 13
- column: 46
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 476
- end: 484
loc: {...}
start: {...}
- line: 13
- column: 33
}end: {...}
- line: 13
- column: 41
}
}- name: "duration"
}value: Literal {...}
- type: "Literal"
- start: 486
- end: 489
loc: {...}
start: {...}
- line: 13
- column: 43
}end: {...}
- line: 13
- column: 46
}
}- value: 500
- raw: "500"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 491
- end: 502
loc: {...}
start: {...}
- line: 13
- column: 48
}end: {...}
- line: 13
- column: 59
}
}- method: false
- shorthand: true
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 491
- end: 502
loc: {...}
start: {...}
- line: 13
- column: 48
}end: {...}
- line: 13
- column: 59
}
}- name: "interpolate"
}- kind: "init"
value: Identifier {...}
- type: "Identifier"
- start: 491
- end: 502
loc: {...}
start: {...}
- line: 13
- column: 48
}end: {...}
- line: 13
- column: 59
}
}- name: "interpolate"
}
}
]
}
]- optional: false
}
}
]- kind: "let"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 510
- end: 539
loc: {...}
start: {...}
- line: 15
- column: 1
}end: {...}
- line: 15
- column: 30
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 514
- end: 538
loc: {...}
start: {...}
- line: 15
- column: 5
}end: {...}
- line: 15
- column: 29
}
}id: Identifier {...}
- type: "Identifier"
- start: 514
- end: 522
loc: {...}
start: {...}
- line: 15
- column: 5
}end: {...}
- line: 15
- column: 13
}
}- name: "seedWord"
}init: CallExpression {...}
- type: "CallExpression"
- start: 525
- end: 538
loc: {...}
start: {...}
- line: 15
- column: 16
}end: {...}
- line: 15
- column: 29
}
}callee: Identifier {...}
- type: "Identifier"
- start: 525
- end: 536
loc: {...}
start: {...}
- line: 15
- column: 16
}end: {...}
- line: 15
- column: 27
}
}- name: "randomWords"
}- arguments: []
- optional: false
}
}
]- kind: "let"
} ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 541
- end: 556
loc: {...}
start: {...}
- line: 16
- column: 1
}end: {...}
- line: 16
- column: 16
}
}expression: CallExpression {...}
- type: "CallExpression"
- start: 541
- end: 555
loc: {...}
start: {...}
- line: 16
- column: 1
}end: {...}
- line: 16
- column: 15
}
}callee: Identifier {...}
- type: "Identifier"
- start: 541
- end: 545
loc: {...}
start: {...}
- line: 16
- column: 1
}end: {...}
- line: 16
- column: 5
}
}- name: "seed"
}arguments: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 546
- end: 554
loc: {...}
start: {...}
- line: 16
- column: 6
}end: {...}
- line: 16
- column: 14
}
}- name: "seedWord"
}
]- optional: false
}
} ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 560
- end: 573
loc: {...}
start: {...}
- line: 18
- column: 1
}end: {...}
- line: 18
- column: 14
}
}expression: CallExpression {...}
- type: "CallExpression"
- start: 560
- end: 572
loc: {...}
start: {...}
- line: 18
- column: 1
}end: {...}
- line: 18
- column: 13
}
}callee: Identifier {...}
- type: "Identifier"
- start: 560
- end: 570
loc: {...}
start: {...}
- line: 18
- column: 1
}end: {...}
- line: 18
- column: 11
}
}- name: "regenerate"
}- arguments: []
- optional: false
}
} FunctionDeclaration {...}
- type: "FunctionDeclaration"
- start: 577
- end: 632
loc: {...}
start: {...}
- line: 20
- column: 1
}end: {...}
- line: 23
- column: 2
}
}id: Identifier {...}
- type: "Identifier"
- start: 586
- end: 596
loc: {...}
start: {...}
- line: 20
- column: 10
}end: {...}
- line: 20
- column: 20
}
}- name: "regenerate"
}- expression: false
- generator: false
- async: false
- params: []
body: BlockStatement {...}
- type: "BlockStatement"
- start: 599
- end: 632
loc: {...}
start: {...}
- line: 20
- column: 23
}end: {...}
- line: 23
- column: 2
}
}body: [...] (2)
ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 603
- end: 613
loc: {...}
start: {...}
- line: 21
- column: 2
}end: {...}
- line: 21
- column: 12
}
}expression: UpdateExpression {...}
- type: "UpdateExpression"
- start: 603
- end: 612
loc: {...}
start: {...}
- line: 21
- column: 2
}end: {...}
- line: 21
- column: 11
}
}- operator: "++"
- prefix: false
argument: Identifier {...}
- type: "Identifier"
- start: 603
- end: 610
loc: {...}
start: {...}
- line: 21
- column: 2
}end: {...}
- line: 21
- column: 9
}
}- name: "counter"
}
}
} ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 616
- end: 629
loc: {...}
start: {...}
- line: 22
- column: 2
}end: {...}
- line: 22
- column: 15
}
}expression: CallExpression {...}
- type: "CallExpression"
- start: 616
- end: 628
loc: {...}
start: {...}
- line: 22
- column: 2
}end: {...}
- line: 22
- column: 14
}
}callee: Identifier {...}
- type: "Identifier"
- start: 616
- end: 626
loc: {...}
start: {...}
- line: 22
- column: 2
}end: {...}
- line: 22
- column: 12
}
}- name: "newPalette"
}- arguments: []
- optional: false
}
}
]
}
} FunctionDeclaration {...}
- type: "FunctionDeclaration"
- start: 636
- end: 687
loc: {...}
start: {...}
- line: 25
- column: 1
}end: {...}
- line: 27
- column: 2
}
}id: Identifier {...}
- type: "Identifier"
- start: 645
- end: 652
loc: {...}
start: {...}
- line: 25
- column: 10
}end: {...}
- line: 25
- column: 17
}
}- name: "newSeed"
}- expression: false
- generator: false
- async: false
- params: []
body: BlockStatement {...}
- type: "BlockStatement"
- start: 655
- end: 687
loc: {...}
start: {...}
- line: 25
- column: 20
}end: {...}
- line: 27
- column: 2
}
}body: [...] (1)
ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 659
- end: 684
loc: {...}
start: {...}
- line: 26
- column: 2
}end: {...}
- line: 26
- column: 27
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 659
- end: 683
loc: {...}
start: {...}
- line: 26
- column: 2
}end: {...}
- line: 26
- column: 26
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 659
- end: 667
loc: {...}
start: {...}
- line: 26
- column: 2
}end: {...}
- line: 26
- column: 10
}
}- name: "seedWord"
}right: CallExpression {...}
- type: "CallExpression"
- start: 670
- end: 683
loc: {...}
start: {...}
- line: 26
- column: 13
}end: {...}
- line: 26
- column: 26
}
}callee: Identifier {...}
- type: "Identifier"
- start: 670
- end: 681
loc: {...}
start: {...}
- line: 26
- column: 13
}end: {...}
- line: 26
- column: 24
}
}- name: "randomWords"
}- arguments: []
- optional: false
}
}
}
]
}
} FunctionDeclaration {...}
- type: "FunctionDeclaration"
- start: 691
- end: 872
loc: {...}
start: {...}
- line: 29
- column: 1
}end: {...}
- line: 34
- column: 2
}
}id: Identifier {...}
- type: "Identifier"
- start: 700
- end: 710
loc: {...}
start: {...}
- line: 29
- column: 10
}end: {...}
- line: 29
- column: 20
}
}- name: "newPalette"
}- expression: false
- generator: false
- async: false
- params: []
body: BlockStatement {...}
- type: "BlockStatement"
- start: 713
- end: 872
loc: {...}
start: {...}
- line: 29
- column: 23
}end: {...}
- line: 34
- column: 2
}
}body: [...] (4)
ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 717
- end: 747
loc: {...}
start: {...}
- line: 30
- column: 2
}end: {...}
- line: 30
- column: 32
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 717
- end: 746
loc: {...}
start: {...}
- line: 30
- column: 2
}end: {...}
- line: 30
- column: 31
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 717
- end: 729
loc: {...}
start: {...}
- line: 30
- column: 2
}end: {...}
- line: 30
- column: 14
}
}- name: "colorPalette"
}right: CallExpression {...}
- type: "CallExpression"
- start: 732
- end: 746
loc: {...}
start: {...}
- line: 30
- column: 17
}end: {...}
- line: 30
- column: 31
}
}callee: Identifier {...}
- type: "Identifier"
- start: 732
- end: 738
loc: {...}
start: {...}
- line: 30
- column: 17
}end: {...}
- line: 30
- column: 23
}
}- name: "random"
}arguments: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 739
- end: 745
loc: {...}
start: {...}
- line: 30
- column: 24
}end: {...}
- line: 30
- column: 30
}
}- name: "colors"
}
]- optional: false
}
}
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 750
- end: 803
loc: {...}
start: {...}
- line: 31
- column: 2
}end: {...}
- line: 31
- column: 55
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 756
- end: 802
loc: {...}
start: {...}
- line: 31
- column: 8
}end: {...}
- line: 31
- column: 54
}
}id: Identifier {...}
- type: "Identifier"
- start: 756
- end: 766
loc: {...}
start: {...}
- line: 31
- column: 8
}end: {...}
- line: 31
- column: 18
}
}- name: "background"
}init: CallExpression {...}
- type: "CallExpression"
- start: 769
- end: 802
loc: {...}
start: {...}
- line: 31
- column: 21
}end: {...}
- line: 31
- column: 54
}
}callee: Identifier {...}
- type: "Identifier"
- start: 769
- end: 788
loc: {...}
start: {...}
- line: 31
- column: 21
}end: {...}
- line: 31
- column: 40
}
}- name: "getBackgroundColors"
}arguments: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 789
- end: 801
loc: {...}
start: {...}
- line: 31
- column: 41
}end: {...}
- line: 31
- column: 53
}
}- name: "colorPalette"
}
]- optional: false
}
}
]- kind: "const"
} ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 806
- end: 836
loc: {...}
start: {...}
- line: 32
- column: 2
}end: {...}
- line: 32
- column: 32
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 806
- end: 835
loc: {...}
start: {...}
- line: 32
- column: 2
}end: {...}
- line: 32
- column: 31
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 806
- end: 814
loc: {...}
start: {...}
- line: 32
- column: 2
}end: {...}
- line: 32
- column: 10
}
}- name: "$bgInner"
}right: MemberExpression {...}
- type: "MemberExpression"
- start: 817
- end: 835
loc: {...}
start: {...}
- line: 32
- column: 13
}end: {...}
- line: 32
- column: 31
}
}object: Identifier {...}
- type: "Identifier"
- start: 817
- end: 827
loc: {...}
start: {...}
- line: 32
- column: 13
}end: {...}
- line: 32
- column: 23
}
}- name: "background"
}property: Identifier {...}
- type: "Identifier"
- start: 828
- end: 835
loc: {...}
start: {...}
- line: 32
- column: 24
}end: {...}
- line: 32
- column: 31
}
}- name: "bgInner"
}- computed: false
- optional: false
}
}
} ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 839
- end: 869
loc: {...}
start: {...}
- line: 33
- column: 2
}end: {...}
- line: 33
- column: 32
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 839
- end: 868
loc: {...}
start: {...}
- line: 33
- column: 2
}end: {...}
- line: 33
- column: 31
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 839
- end: 847
loc: {...}
start: {...}
- line: 33
- column: 2
}end: {...}
- line: 33
- column: 10
}
}- name: "$bgOuter"
}right: MemberExpression {...}
- type: "MemberExpression"
- start: 850
- end: 868
loc: {...}
start: {...}
- line: 33
- column: 13
}end: {...}
- line: 33
- column: 31
}
}object: Identifier {...}
- type: "Identifier"
- start: 850
- end: 860
loc: {...}
start: {...}
- line: 33
- column: 13
}end: {...}
- line: 33
- column: 23
}
}- name: "background"
}property: Identifier {...}
- type: "Identifier"
- start: 861
- end: 868
loc: {...}
start: {...}
- line: 33
- column: 24
}end: {...}
- line: 33
- column: 31
}
}- name: "bgOuter"
}- computed: false
- optional: false
}
}
}
]
}
} FunctionDeclaration {...}
- type: "FunctionDeclaration"
- start: 876
- end: 933
loc: {...}
start: {...}
- line: 36
- column: 1
}end: {...}
- line: 39
- column: 2
}
}id: Identifier {...}
- type: "Identifier"
- start: 885
- end: 892
loc: {...}
start: {...}
- line: 36
- column: 10
}end: {...}
- line: 36
- column: 17
}
}- name: "setSeed"
}- expression: false
- generator: false
- async: false
- params: []
body: BlockStatement {...}
- type: "BlockStatement"
- start: 895
- end: 933
loc: {...}
start: {...}
- line: 36
- column: 20
}end: {...}
- line: 39
- column: 2
}
}body: [...] (2)
ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 899
- end: 914
loc: {...}
start: {...}
- line: 37
- column: 2
}end: {...}
- line: 37
- column: 17
}
}expression: CallExpression {...}
- type: "CallExpression"
- start: 899
- end: 913
loc: {...}
start: {...}
- line: 37
- column: 2
}end: {...}
- line: 37
- column: 16
}
}callee: Identifier {...}
- type: "Identifier"
- start: 899
- end: 903
loc: {...}
start: {...}
- line: 37
- column: 2
}end: {...}
- line: 37
- column: 6
}
}- name: "seed"
}arguments: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 904
- end: 912
loc: {...}
start: {...}
- line: 37
- column: 7
}end: {...}
- line: 37
- column: 15
}
}- name: "seedWord"
}
]- optional: false
}
} ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 917
- end: 930
loc: {...}
start: {...}
- line: 38
- column: 2
}end: {...}
- line: 38
- column: 15
}
}expression: CallExpression {...}
- type: "CallExpression"
- start: 917
- end: 929
loc: {...}
start: {...}
- line: 38
- column: 2
}end: {...}
- line: 38
- column: 14
}
}callee: Identifier {...}
- type: "Identifier"
- start: 917
- end: 927
loc: {...}
start: {...}
- line: 38
- column: 2
}end: {...}
- line: 38
- column: 12
}
}- name: "regenerate"
}- arguments: []
- optional: false
}
}
]
}
}
]- sourceType: "module"
}
}- module: undefined
}
The AST is not public API and may change at any point in time