WorkspaceRough Ideas — sketch planning board
Find your next idea/Create
TEMPLATE

Rough Ideas — sketch planning board

A hand-drawn planning canvas with SVG connectors, handwritten blocks and a switch between two project routes.

S studioUpdated Oct 5, 2026Revision 1
Remix this Present Download
LIVE PREVIEW Isolated & interactive
<!-- Original layout, SVG/CSS artwork and JavaScript © 2026 XXC Templates. MIT License.
Visual pattern references (original code, names and content; no affiliation):
Excalidraw: https://excalidraw.com/
Hand-drawn diagram aesthetics, restrained canvas controls and direct manipulation.
Illustrative sample content and data; no real accounts, payments, reservations or messages. -->
<main>
  <header>
    <b>rough ideas</b><span>GOOD THINKING STARTS MESSY.</span
    ><button id="change">Try another route ↻</button>
  </header>
  <section class="paper">
    <div class="paper-note">
      <h1>How does a small idea<br />become a real thing?</h1>
      <p>Start here. See where it goes.</p>
    </div>
    <svg viewBox="0 0 720 300" role="img" aria-label="Hand-drawn project route">
      <defs>
        <marker
          id="arrow"
          viewBox="0 0 10 10"
          refX="8"
          refY="5"
          markerWidth="7"
          markerHeight="7"
          orient="auto"
        >
          <path d="M1 1L9 5 1 9" fill="none" stroke="#66716d" stroke-width="1.5" />
        </marker>
      </defs>
      <g fill="none" stroke="#788078" stroke-width="1.5" marker-end="url(#arrow)">
        <path d="M168 120C220 105 240 98 270 118" />
        <path id="route" d="M438 120C490 100 505 95 549 115" />
        <path d="M607 165C600 245 370 270 330 175" stroke-dasharray="5 5" />
      </g>
      <g class="sketch-node" transform="rotate(-2 93 125)">
        <path d="M18 77L166 73 172 164 16 167Z" fill="#efdf9c" stroke="#a49d7b" />
        <text x="94" y="112">a curious</text>
        <text x="94" y="140">question</text>
      </g>
      <g class="sketch-node" transform="rotate(1 354 125)">
        <path d="M274 72L435 75 440 166 269 162Z" fill="#d3e2d3" stroke="#8ea18c" />
        <text x="354" y="111" id="middle-a">a tiny</text>
        <text x="354" y="140" id="middle-b">experiment</text>
      </g>
      <g class="sketch-node" transform="rotate(-2 616 125)">
        <path d="M551 77L697 72 703 167 548 163Z" fill="#ded9e9" stroke="#a39ab6" />
        <text x="626" y="111">something</text>
        <text x="626" y="140">to learn</text>
      </g>
      <text class="aside-note" x="330" y="264">then do it a little differently ↺</text>
    </svg>
    <p class="pencil">There is no straight line. That's the point.</p>
  </section>
  <output data-status aria-live="polite"></output>
  <footer class="demo-note">Fictional brand · local interface demo · no information is sent</footer>
</main>
Revision history · 1 versions
v12026-10-05 18:26:30 UTC

Keep the ideas flowing.

Explore the library
HELP KEEP THE WORKSHOP USEFUL

Report this creation
ONE QUICK CHECK

Continue?