Rough.js Workflow Template

1. Load Rough.js Library and Fonts

2. Define SVG Structure

 
<svg id="notation-comparison" width="700" height="400" xmlns="http://www.w3.org/2000/svg">

  <!-- Four boxes for each notation type -->
  <!-- Box 1: Standard Notation (top left) -->
  <rect id="box1" x="40" y="40" width="280" height="140" />

  <!-- Box 2: Normalized Scientific (top right) -->
  <rect id="box2" x="380" y="40" width="280" height="140" />

  <!-- Box 3: Engineering Notation (bottom left) -->
  <rect id="box3" x="40" y="220" width="280" height="140" />

  <!-- Box 4: Unnormalized Scientific (bottom right) -->
  <rect id="box4" x="380" y="220" width="280" height="140" />

</svg>

3. Rough.js Customization Options

 
const roughConfig = {
  // Box styling - black/blue/white palette with handwritten look
  boxStyle: {
    fill: "#ffffff",        // white fill
    fillStyle: "solid",
    stroke: "#1e3a8a",      // blue-900 (dark blue)
    strokeWidth: 2.8,
    roughness: 1.5,
    fillWeight: 0.5
  }
};

4. Canvas Rendering (Rough.js)

Rough.js Canvas Rendering

Hand-drawn version appears here:

5. SVG Output (Saveable)

SVG Output (Right-click to save)

Scalable SVG version appears here:



How to Use This Template:

  1. Set dimensions and ID in the setup chunk at the top:
    • svg_width - Width in pixels (default: 700)
    • svg_height - Height in pixels (default: 400)
    • svg_id - ID for the SVG element and download filename (default: “notation-comparison”)
  2. Customize your design in sections 4 & 5:
    • Update the drawing code in the canvas and SVG sections
    • Modify rough.js styling (roughness, bowing, strokeWidth, etc.)
    • Change colors, fonts, and layout
  3. Download your SVG:
    • Right-click the SVG output or use the download button
    • The file will be saved as [svg_id].svg

The template provides both a Canvas rendering (for display) and SVG output (for saving as a true vector file).