Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/razshare/svelte-animated-pixels
https://github.com/razshare/svelte-animated-pixels
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/razshare/svelte-animated-pixels
- Owner: razshare
- License: mit
- Created: 2024-04-28T21:56:26.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-06-03T11:04:03.000Z (7 months ago)
- Last Synced: 2024-06-03T13:09:27.545Z (7 months ago)
- Language: JavaScript
- Size: 97.7 KB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Svelte Animated Pixels
This library provides an easy way to create pixelated canvas animations by just declaring maps of pixels as strings.
Install with:
```sh
npm i -D svelte-animated-pixels
```
Then start drawing, the idea is pretty simple
- `x` delimits a pixel to be drawn.
- `.` delimits the background.
- Any other character that's not `x` or `.` is safely ignored.
```svelte
.wrapper {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: grid;
justify-items: center;
align-items: center;
background: black;
}
import { Animated, PixelMap } from 'svelte-animated-pixels';
const FRAMES = [
`
. x . . . . . x .
. . x . . . x . .
. . x x x x x . .
. x x x x x x x .
. x x x x x x x .
. . x x x x x . .
. x . . . . . x .
. . x . . . x . .
`,
`
. . . x . x . . .
. . x . . . x . .
. . x x x x x . .
. x x x x x x x .
. x x x x x x x .
. . x x x x x . .
. . x x . x x . .
. . . . . . . . .
`
];
```
> [!NOTE]
> Once a frame has been drawn on a pixel map, all subsequent drawn frames MUST have the same shape, meaning both width and height MUST match.
# Planned Features
| Feature | Implemented |
|---------|-------------|
| Draw pixels using declarative maps of strings | ✅ Done - `` |
| Created animations from list of maps | ✅ Done - `` |
| Fine tune each pixel's color | ✖ WIP |