You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Commit 5ff20aa
Browse filesBrowse the repository at this point in the historyBrowse files
Copy file name to clipboardExpand all lines: README.md
+9-12Lines changed: 9 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -41,17 +41,17 @@ Inspired by [Orta Therox](https://github.com/Orta). Thanks Orta for your outstan
41
41
| `text` | ❌ | `username` value | Text to display as collision obstacles |
42
42
| `output-path` | ❌ | `gravity.svg` | Path to write the generated SVG file |
43
43
| `font-size` | ❌ | `48` | Font size of the collision text |
44
-
| `compression-tolerance` | ❌ | `0.5` | Trajectory compression tolerance in SVG pixels. At every original moment, the animated position stays within this distance of the real one. The default fits most cases; `0` is lossless in both position and timing (see below) |
44
+
| `compression-tolerance` | ❌ | `0.5` | Trajectory compression tolerance in SVG pixels. At every original moment, the animated position stays within this distance of the real one; `0` is lossless in both position and timing (see below) |
45
45
| `compression-algorithm` | ❌ | `Greedy` | Trajectory compression algorithm: `Greedy`(fast), `DP` (smallest SVG), `RDP` (fastest). See below for the trade-offs |
46
-
| `max-simulation-time` | ❌ | - | Maximum simulation time in seconds, counted as playback duration (simulated time = this value × `speed`). When reached, the trajectory simulated so far is returned instead of waiting for every block to settle. Leave empty to simulate until all blocks rest |
46
+
| `max-simulation-time` | ❌ | - | Maximum animation playback duration in seconds. Once reached, blocks freeze where they are instead of waiting for every block to settle. Leave empty to play until all blocks rest |
| `friction` | ❌ | `0.3` | Friction coefficient of the contribution blocks |
49
-
| `restitution` | ❌ | `0` | Restitution (bounciness) of the contribution blocks. Values far from 0 may fling blocks out of the visible area; blocks falling below the world bottom are removed |
49
+
| `restitution` | ❌ | `0` | Restitution (bounciness) of the contribution blocks. Values far from 0 may fling blocks out of the visible area |
50
50
| `text-top` | ❌ | `50` | Distance from the top of the world to the text |
51
51
| `background-color` | ❌ | `transparent` | Background color of the SVG (CSS color value) |
52
52
| `text-color` | ❌ | `black` | Color of the collision text (CSS color value) |
53
-
| `scale` | ❌ | `3` | Display zoom factor: the SVG `width`/`height` are the physics dimensions × scale, while the viewBox keeps the raw physics size |
54
-
| `speed` | ❌ | `3` | Playback speed multiplier: the animation duration is the simulated time ÷ speed |
53
+
| `scale` | ❌ | `3` | Overall zoom applied to the final SVG; does not change the actual size of the physics world |
54
+
| `speed` | ❌ | `3` | Playback speed multiplier: the higher the value, the faster the animation plays |
55
55
| `css` | ❌ | `false` | Use the CSS animation engine instead of SMIL `animateTransform`. See below |
56
56
| `animation` | ❌ | `var(--n) var(--dur) linear both` | Custom CSS `animation` value for the CSS engine. ⚠️ Modify with caution — a wrong value breaks the animation. Requires `css: true` |
57
57
| `width` | ❌ | `300` | Width of the physics world. ⚠️ Affects layout and SVG size |
@@ -62,7 +62,7 @@ Inspired by [Orta Therox](https://github.com/Orta). Thanks Orta for your outstan
62
62
63
63
### Reducing file size
64
64
65
-
The trajectory is compressed by default: `compression-tolerance`(default `0.5`) merges
65
+
The trajectory is compressed by default: `compression-tolerance`merges
66
66
trajectory points into keyframes so that, at every original moment, the interpolated
67
67
position stays within the given distance (in SVG pixels) of the real one — speed changes
68
68
such as bounces, landings and stops keep their real pace.
@@ -92,16 +92,15 @@ Two output engines are available; both produce a single static SVG file and play
92
92
same trajectory at the same pace:
93
93
94
94
- **SMIL** (default) drives every block with `<animateTransform>` elements.
95
-
- **CSS** (`css: true`) drops those elements and declares all animations in one
96
-
self-contained `<style>` block: each block's trajectory becomes a `@keyframes` rule.
95
+
- **CSS** (`css: true`) drives every block with a CSS `animation` declaration.
97
96
98
97
The rendered animation is identical. Choose CSS when the target environment handles
99
98
SMIL poorly — some sanitizers strip SMIL animation elements, while CSS animation in
100
99
SVG is more widely supported (GitHub READMEs load SVGs via `<img>`, where both work).
101
100
The CSS output is slightly larger than SMIL.
102
101
103
102
With `css: true`, the `animation` input replaces the animation declaration applied to
104
-
every block (default `var(--n) var(--dur) linear both`). Available variables:
103
+
every block. Available variables:
105
104
106
105
- `--n`— each block's keyframes name, required
107
106
- `--dur`— the playback duration
@@ -116,8 +115,7 @@ Must not contain braces, semicolons or `]]>`.
116
115
size. The contribution blocks are laid out from `size` and `interval`, the text is centered
117
116
with `width`, and the drop height follows `height` — change them together and re-check the
118
117
result rather than tweaking one in isolation. If the simulation fails to settle after your
119
-
changes, set `max-simulation-time` to cap the simulation and still get the trajectory up to
120
-
that point.
118
+
changes, set `max-simulation-time` to cap the animation duration and still get the SVG.
121
119
122
120
`font-path`swaps the collision font. It accepts a local `.ttf`/`.otf` path or an `http(s)` URL.
123
121
The bundled Liberation Serif Bold is used by default because its contours are clean and
@@ -127,7 +125,6 @@ decompose stably. Custom fonts are not guaranteed to work:
127
125
collision shapes.
128
126
- Some fonts cannot be parsed by opentype.js at all (common ones such as DejaVu fail on their
129
127
GSUB tables).
130
-
- Different font metrics usually require re-tuning `font-size` and `text-top`.
0 commit comments