Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/catsjuice/svg-drawing

A canvas for easy sketching and replay, exportable in SVG format.
https://github.com/catsjuice/svg-drawing

canvas drawing svg

Last synced: about 2 months ago
JSON representation

A canvas for easy sketching and replay, exportable in SVG format.

Host: GitHub
URL: https://github.com/catsjuice/svg-drawing
Owner: CatsJuice
License: mit
Created: 2023-07-20T14:43:33.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2024-07-27T00:15:59.000Z (5 months ago)
Last Synced: 2024-07-27T01:27:15.713Z (5 months ago)
Topics: canvas, drawing, svg
Language: Vue
Homepage: https://draw.oooo.so
Size: 608 KB
Stars: 177
Watchers: 4
Forks: 14
Open Issues: 3
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        


  

    

    

  



# svg-drawing

A simple canvas to draw lines and replay rendered as SVG, can be exported as SVG.

# Features

- **Share**

  Share your drawing with a url that contains all the information to replay it, it's limited, see [Problems](#problems). Some share examples [here](./SHARE.md).

- **Brushwork**

  The brushwork's implementation is based on [perfect-freehand](https://github.com/steveruizok/perfect-freehand)

# Problems

- **Share limit**

  

  The share link contains all points that you draw, because of the limitation of url length(may be different with browsers), the share info maybe lost, and info cannot be parsed.

- **Rendering problems at line intersections.**

  

  When brushwork enabled, it will use mask to implement the effect ( which is inspired by [AntFu](https://github.com/antfu)'s [Animated SVG Logo](https://antfu.me/posts/animated-svg-logo) ). So this problem is hard to resolve for now.

# Roadmap

- [x] Basic Canvas, replay and export

- [ ] Logo

- [x] README

- [x] Canvas size configuration

- [x] Realtime preview

  - [x] Preview as thumbnail

  - [x] Full screen / Original size preview

- [x] Replay configuration

  - [x] Speed

  - [x] Loop

  - [x] Animation easing

- [x] Operation history

  - [x] Undo

  - [x] Redo

- [x] Pen configuration

  - [x] Color

  - [x] Stroke width

- [ ] Export format

  - [x] SVG

  - [ ] GIF (hold)

- [x] Brushwork support

  - See https://github.com/steveruizok/perfect-freehand

- [ ] Import & Export

- [x] Share url

- [ ] Copy svg base64

- [ ] Realistic pressure

  - See https://pressurejs.com/