# Art
TinyBoxes are animated, one-of-a-kind SVG art pieces generated from the following traits:
# Colors
# Root Color
The color palette is based on a user-selected root color in HSL format
HSL stands for Hue, Saturation and Lightness
Hue is a value from 0 to 360 degrees
Saturation and Lightness are both percentages from 0 to 100
# Schemes
Color schemes are generated to complement your root color
Each scheme is a set of angle offsets from the root hue along the color wheel
This defines fixed relationships for the hues in a scheme
Complimenting hues are generated by adding these offsets to the root hue
# Schemes and their offset angles
- Triadic (0, 120, 240)
- Complimentary (0, 180)
- Tetradic (0, 60, 180, 240)
- Analogous (0, 30, 330)
- Analogous and Complimentary (0, 30, 180, 330)
- Split Complimentary (0, 150, 210)
- Complimentary and Analogous (0, 150, 180, 210)
- Series (0, 30, 60, 90)
- Square (0, 90, 180, 270)
- Mono (0)
# Gray Scale
A rare set of tokens with 0% saturation scattered throughout all schemes
# Contrast
How wide a range of lightness to pick shades from
Defines a range of contrast relative to the root color for the color palette
# Shades
The number of lightness levels in a token's palette
Distributed in descending shades over the contrast range
# Shapes
# Shape Count
The number of shapes in a TinyBox
# Hatching
Shapes divisible by the hatching modulus become tall and narrow or short and wide at a repeating interval
# Size Range
The range of width and height of shape sizes
# Positioning
# Grid
The number of rows and columns that shapes are distributed across
# Spread
How much the shapes positions may diverge from the grid 0-100%
# Mirroring
There are 3 Levels of mirroring
Each has four modes off, diagonal, opposite diagonal, and quad
# Animation
# Render Settings
Animation can be set to 8 different playback modes
- Off
- On
- Hover
- Double Click / Click
- Click
- 1 Repeat
- 2 Repeats
- 25 Repeats
# Duration
The duration modifier allows you to adjust the length/speed of the animation
