rough-svelte
The incredible roughjs coerced into svelte components.
<RoughSVG | RoughCanvas {width} {height} {viewBox} {options} />
You need one of these as the container. You can pass it width
, height
, viewBox
and, options
. options
should be a roughjs options object.
<!-- fun goes here -->
<Line points={[x1, y1, x2, y2]} {options} />
Draws a line from x1
- y1
to x2
- y2
.
rectangle (x, y, width, height [, options])
Draws a rectangle with the top-left corner at (x, y) with the specified width and height.
ellipse (x, y, width, height [, options])
Draws an ellipse with the center at (x, y) and the specified width and height.
circle (x, y, diameter [, options])
Draws a circle with the center at (x, y) and the specified diameter.
linearPath (points [, options])
Draws a set of lines connecting the specified points.
points is an array of points. Each point is an array with 2 values - [x, y]
roughCanvas;
polygon (vertices [, options])
Draws a polygon with the specified vertices.
vertices is an array of points. Each point is an array with 2 values - [x, y]
roughCanvas;
arc (x, y, width, height, start, stop, closed [, options])
Draws an arc. An arc is described as a section of en ellipse. x, y represent the center of that ellipse. width, height are the dimensions of that ellipse.
start, stop are the start and stop angles for the arc.
closed is a boolean argument. If true, lines are drawn to connect the two end points of the arc to the center.
roughCanvas;roughCanvas;roughCanvas;
curve (points [, options])
Draws a curve passing through the points passed in.
points is an array of points. Each point is an array with 2 values - [x, y]
Rough.js sine wave
// draw sine curvelet points = ;for let i = 0; i < 20; i++ let x = 400 / 20 * i + 10; let xdeg = MathPI / 100 * x; let y = Math + 500; points;roughCanvas;
path (d [, options])
Draws a path described using a SVG path data string.
roughCanvas;roughCanvas;
One of the options you can pass in to the path method is simplification which tries to reduce the number of points in the path, thereby simplifying it. This is great for drawing complex paths like maps. simplification is a number between 0 and 1.
draw (drawable)
Draws the drawable object passed in.
Read more about it here.