ag502 / svg-drawing

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

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. Some share examples here.
• Brushwork The brushwork's implementation is based on 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's Animated SVG Logo ). So this problem is hard to resolve for now.

Roadmap

• Basic Canvas, replay and export
• Logo
• README
• Canvas size configuration
• Realtime preview
  • Preview as thumbnail
  • Full screen / Original size preview
• Replay configuration
  • Speed
  • Loop
  • Animation easing
• Operation history
  • Undo
  • Redo
• Pen configuration
  • Color
  • Stroke width
• Export format
  • SVG
  • GIF (hold)
• Brushwork support
  • See https://github.com/steveruizok/perfect-freehand
• Import & Export
• Share url
• Copy svg base64
• Realistic pressure
  • See https://pressurejs.com/