Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/x8bitrain/svg-emoji-corrupt
SVG and Emoji Corrupter built in Vue 3
https://github.com/x8bitrain/svg-emoji-corrupt
corrupt corruption dom-manipulation emoji-corrupter svg vite vue3 web-app
Last synced: about 1 month ago
JSON representation
SVG and Emoji Corrupter built in Vue 3
- Host: GitHub
- URL: https://github.com/x8bitrain/svg-emoji-corrupt
- Owner: x8BitRain
- Created: 2019-10-11T00:57:39.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-08-29T18:21:38.000Z (5 months ago)
- Last Synced: 2024-08-30T11:54:05.609Z (5 months ago)
- Topics: corrupt, corruption, dom-manipulation, emoji-corrupter, svg, vite, vue3, web-app
- Language: TypeScript
- Homepage: https://x8bitrain.github.io/svg-emoji-corrupt/
- Size: 2.62 MB
- Stars: 13
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# SVG/Emoji Corrupter
https://x8bitrain.github.io/svg-emoji-corrupt/
Feed it an emoji or an SVG file and the corrupter will target the numbers you specify inside the d="" paths of the SVG
and replaces them with a random number between whatever you set in the "replace with" slider. Why not?
## TODO
- Add an emoji merge feature.
## Adding Custom Corrupter functions
Two methods are exposed to the window object for adding and getting corruption functions.
Getting all corruption functions:
```javascript
window.getCorrupters()
```
Adding a custom function:
```typescript
window.addCorrupter({
id: "multiply",
name: "Multiply",
active: true,
description: "Multiply the target values by the selected value",
function: (
pathData,
search,
value,
node
) => {
return pathData.replace(search, (match) =>
String(Math.trunc(Number(match) * Number(value))),
);
},
});
```
### Explanation:
This function is called for each found `` node in the SVG. **The function must return `pathData` (modified or not)
otherwise the SVG will disappear.**
```typescript
function: (
pathData: string, // The raw `d` attribute value, i.e. "d="M361.794,351.072c2...."
search: RegExp, // The regular expression containing the selected target values, i.e. `/1|2|3|4|5/gi`
value: string, // The current value of the slider, i.e. 5
node: SVGPathElement // The entire SVG path node, you could add any attribute or class this way.
) => {}
```
All of the corruption functions are stored in the `corruptions.ts` object in `src/utils/corruptions.ts`. Feel free to
open a PR to add your own!
## Made with
- [vue3 - twemoji - picker](https://github.com/limin04551/vue3-twemoji-picker)
- [panzoom](https://github.com/timmywil/panzoom)
- [round / SVG](https://github.com/round/SVG/blob/master/README.md)
## FAQ
- Why don't some links work?
- [Explanation](https://github.com/x8BitRain/svg-emoji-corrupt/issues/16#issuecomment-2291480087)
## Development
```bash
git clone https://github.com/x8BitRain/svg-emoji-corrupt.git
cd svg-emoji-corrupt/
bun install
```
```bash
bun dev
```
## Development
```bash
bun build
```