Build notes / 09

Inside
STILL.

A contemplative journal of empty space and the imperfect circle. The signature technique is scroll-drawn svg ink circle.

01

Draw one imperfect path

The ensō is a single open cubic Bézier path. Uneven curvature and an overlapping end keep it from feeling like a geometric circle. The Japanese line means roughly “rest the heart in the empty space.”

02

Let the line carry texture

A seeded SVG fractal-noise filter displaces the stroke by seven units. The circle stays vector-based. There is no paper bitmap, ink asset, or photograph.

03

Reveal by measured length

getTotalLength supplies the actual path length. Stroke dasharray is set to that value; dashoffset is length × (1 − progress). Progress begins at 0.32 and reaches one after roughly 0.65 viewport heights of scrolling.

04

Use absence deliberately

Vertical typography, generous margins, and a restrained violet-gray stroke establish the composition. Reduced motion renders the complete circle immediately. Mobile places the vertical text above the circle.

Reproduce the site

  1. Download the complete source below and keep its name index.html.
  2. Open it through a static server. From its directory, run python3 -m http.server 8000, then visit http://localhost:8000. There is no install or build step.
  3. The stylesheet lives in the head. The rendering and interaction code lives in the final script. Adjust one parameter at a time and compare the result at desktop and 375 px widths.
  4. Google Fonts requires a network connection. All visible artwork is computed locally. Native system fallbacks preserve readable text if fonts fail.
  5. Enable your operating system’s reduced-motion setting and repeat the interaction. Use browser developer tools to check errors, overflow, and frame timing before publishing.
Download complete HTML ↓
The complete rendering and interaction code
const path=document.querySelector('#enso'),length=path.getTotalLength(),rm=matchMedia('(prefers-reduced-motion: reduce)');path.style.strokeDasharray=length;function draw(){const progress=rm.matches?1:Math.min(1,.32+scrollY/(innerHeight*.95));path.style.strokeDashoffset=length*(1-progress)}draw();addEventListener('scroll',draw,{passive:true});addEventListener('resize',draw);rm.addEventListener('change',draw)
The complete visual system
:root{--body:'Zen Kaku Gothic New',sans-serif}body{background:#f3f0e9;color:#38363b;font-family:var(--body)}header{padding:30px 5vw;display:flex;justify-content:space-between;font-size:13px}header b{letter-spacing:.4em;font-weight:400}.first{position:relative;min-height:110svh;padding:8vh 8vw;display:grid;grid-template-columns:1fr 1.3fr;align-items:center}.vertical{writing-mode:vertical-rl;letter-spacing:.26em;font:400 clamp(32px,4vw,58px)/1.8 'Shippori Mincho';height:490px;justify-self:center}.circle-wrap{position:relative;width:100%;max-width:650px;aspect-ratio:1}.circle-wrap svg{width:100%;height:100%;overflow:visible}#enso{fill:none;stroke:#75617f;stroke-width:15;stroke-linecap:round;stroke-dasharray:1600;stroke-dashoffset:1000;filter:url(#ink)}.caption{position:absolute;bottom:0;right:0;font-size:13px;text-align:right;line-height:1.8}.journal{max-width:860px;margin:0 auto;padding:50px 7vw 140px;min-height:70vh}.journal h1{font:400 clamp(45px,6vw,80px)/1.2 'Shippori Mincho';letter-spacing:-.035em;margin:0 0 40px}.journal p{font-size:19px;max-width:42ch;margin-left:auto}.rule{width:50px;height:1px;background:#75617f;margin:40px 0}.colophon{border-top:1px solid #75617f33}@media(max-width:650px){.first{grid-template-columns:1fr;min-height:950px;padding:20px 7vw 70px;gap:30px}.vertical{height:360px;font-size:35px;justify-self:end;margin-right:35px}.circle-wrap{max-width:380px;justify-self:center}.caption{bottom:-25px;font-size:12px}.journal{padding-bottom:80px}.journal h1{font-size:44px}.journal p{font-size:18px}}

Original fictional design study. No stock photography, model files, image textures, or sample audio.