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.

<script>
  import { RoughSVG } from 'rough-svelte/svg';
</script>

<RoughSVG width="100" height="200" options="{{fill: 'red'}}">
  <!-- fun goes here -->
</RoughSVG>

<Line points={[x1, y1, x2, y2]} {options} />

Draws a line from x1 - y1 to x2 - y2.

<script>
  import { Rough, Line } from 'rough-svelte';
</script>

<Rough width="100" height="200">
  <Line
    points="{[10, 10, 190, 10]}"
    options="{{stroke: 'cadetblue', strokeWidth: 0.8}}"
  />
</Rough>

rectangle (x, y, width, height [, options])

Draws a rectangle with the top-left corner at (x, y) with the specified width and height.

<script>
  import { RoughSVG, RoughRectangle } from 'rough-svelte/svg';
</script>

<RoughSVG width="100" height="100" options="{{fill: 'red'}}">
  <RoughLine
    x="10"
    y="10"
    width="80"
    height="80"
    options="{{stroke: 'cadetblue', strokeWidth: 0.8}}"
  />
</RoughSVG>

ellipse (x, y, width, height [, options])

Draws an ellipse with the center at (x, y) and the specified width and height.

<script>
  import { RoughSVG, RoughEllipse } from 'rough-svelte/svg';
</script>

<RoughSVG width="100" height="100" options="{{fill: 'red'}}">
  <RoughLine
    x="50"
    y="50"
    width="80"
    height="40"
    options="{{stroke: 'cadetblue', strokeWidth: 0.8}}"
  />
</RoughSVG>

circle (x, y, diameter [, options])

Draws a circle with the center at (x, y) and the specified diameter.

<script>
  import { RoughSVG, RoughEllipse } from 'rough-svelte/svg';
</script>

<RoughSVG width="100" height="100" options="{{fill: 'red'}}">
  <RoughLine
    x="50"
    y="50"
    diameter="80"
    height="80"
    options="{{stroke: 'pink', strokeWidth: 5}}"
  />
</RoughSVG>

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.linearPath([[690, 10], [790, 20], [750, 120], [690, 100]]);

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.polygon([[690, 130], [790, 140], [750, 240], [690, 220]]);

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.arc(350, 300, 200, 180, Math.PI, Math.PI \* 1.6, true);
roughCanvas.arc(350, 300, 200, 180, 0, Math.PI / 2, true, {
stroke: 'red', strokeWidth: 4,
fill: 'rgba(255,255,0,0.4)', fillStyle: 'solid'
});
roughCanvas.arc(350, 300, 200, 180, Math.PI / 2, Math.PI, true, {
stroke: 'blue', strokeWidth: 2,
fill: 'rgba(255,0,255,0.4)'
});

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 curve
let points = [];
for (let i = 0; i < 20; i++) {
  let x = (400 / 20) * i + 10;
  let xdeg = (Math.PI / 100) * x;
  let y = Math.round(Math.sin(xdeg) * 90) + 500;
  points.push([x, y]);
}
roughCanvas.curve(points, {
  stroke: 'red',
  strokeWidth: 3,
});

path (d [, options])

Draws a path described using a SVG path data string.

roughCanvas.path('M37,17v15H14V17z M50,0H0v50h50z');
roughCanvas.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', {
  fill: 'green',
});

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.