Design Atlas
한국어
❖ Design styles

Hand-drawn style

핸드 드로잉 스타일

Slightly wobbly lines as if drawn without a ruler, marker-style fills — a screen that reads as if it were sketched by hand on paper.

Also known as: Sketchy UIDoodle style
···
html
<div class="stage">
  <svg width="0" height="0">
    <filter id="r1"><feTurbulence type="fractalNoise" baseFrequency="0.018 0.09" numOctaves="2" seed="3" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="5"/></filter>
    <filter id="r2"><feTurbulence type="fractalNoise" baseFrequency="0.018 0.09" numOctaves="2" seed="9" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="5"/></filter>
  </svg>
  <div class="card">
    <svg class="outline" viewBox="0 0 220 140" preserveAspectRatio="none">
      <rect id="o1" x="6" y="6" width="208" height="128" rx="16" fill="none" stroke="var(--fg)" stroke-width="3" filter="url(#r1)"/>
      <rect id="o2" x="6" y="6" width="208" height="128" rx="16" fill="none" stroke="var(--fg)" stroke-width="3" filter="url(#r2)" opacity="0"/>
    </svg>
    <div class="content">
      <b>Sketch it!</b>
      <svg class="squiggle" viewBox="0 0 140 14" preserveAspectRatio="none">
        <path d="M2,8 Q20,2 38,8 T74,8 T110,8 T138,8" fill="none" stroke="var(--accent-2)" stroke-width="3" stroke-linecap="round"/>
      </svg>
    </div>
  </div>
</div>
css
.stage{width:100%;height:100%;display:grid;place-items:center}
.card{position:relative;width:min(80%,240px);aspect-ratio:220/140}
.outline{position:absolute;inset:0;width:100%;height:100%}
#o1{animation:cross 2.6s steps(1) infinite}
#o2{animation:cross 2.6s steps(1) infinite reverse}
@keyframes cross{0%,45%{opacity:1}50%,100%{opacity:0}}
.content{position:relative;height:100%;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;gap:10px;padding:0 12%;font-family:"Comic Sans MS","Segoe Print",cursive}
.content b{font-size:clamp(16px,4vmin,22px);color:var(--fg);transform:rotate(-1.5deg)}
.squiggle{width:70%;height:14px}

When a perfectly smooth vector curve and exact straight line start to feel cold and mechanical, this style adds deliberate imperfection back in for warmth and human touch. It shows up in educational apps, brainstorming tools (Excalidraw is the classic example), and illustration for casual brands.

There are two common ways to build it. An SVG feTurbulence + feDisplacementMap filter can subtly jitter a line to fake a hand tremor; a lighter approach just gives an element's four border-radius corners different (and slightly time-varying) values so it never reads as a perfect rectangle. Picking a handwriting-style typeface ties the look together.

Shake it too much and it just looks messy; keep the type too small and legibility suffers. Keeping the wobble amplitude small, and limiting it to headings and decorative elements rather than body text, is the safer bet.