The latest articles on DEV Community by Vidit Patil (@viditx). https://dev.to/viditx https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4097813%2F8956e2bb-1435-4c5b-9684-47ab7fd5b6c9.png https://dev.to/viditx en Vidit Patil Thu, 27 Aug 2026 17:07:01 +0000 https://dev.to/viditx/why-every-saas-looks-the-same-and-how-i-built-a-hand-drawn-ui-library-with-svg-filters-53l5 https://dev.to/viditx/why-every-saas-looks-the-same-and-how-i-built-a-hand-drawn-ui-library-with-svg-filters-53l5 <p>Every landing page in 2026 feels like it was cloned from the same prompt: purple mesh gradients, 1px grey borders, and Inter font. </p> <p>It looks sterile, robotic, and completely devoid of human personality.</p> <p>A few weeks ago, I started experimenting with a different approach: bringing the tactile, imperfect warmth of physical notebook sketches and wireframes back to the web without shipping a heavy canvas runtime.</p> <p>The result is <strong>Sketchmorphism</strong> — an open-source UI design system built on hand-drawn strokes, cross-hatch depth, and paper physics.</p> <h2> Core Philosophy </h2> <ul> <li> <strong>Strokes over borders:</strong> Borders are not straight 1px lines. They wobble naturally using lightweight SVG displacement filters.</li> <li> <strong>Hatches over shadows:</strong> Standard blurred CSS box-shadows look out of place on a sketch. Elevation is rendered using 45-degree pencil cross-hatching. When you click a button, it physically sinks into the hatch.</li> <li> <strong>Three-pencil palette:</strong> Everything is built using a strict physical palette: Desk, Warm Paper, Charcoal Ink, Draft Blue, and Revision Red.</li> <li> <strong>Zero canvas bloat:</strong> Pure CSS and native SVG filter primitives. Full DOM accessibility, native text selection, and 60fps performance on mobile.</li> </ul> <h2> Live Demos and Source Code </h2> <p>The entire system is 100% open source under the MIT license.</p> <ul> <li> <strong>Live Interactive Demo:</strong> <a href="https://viditx.github.io/sketchmorphism/prototypes/full-website-demo.html" rel="noopener noreferrer">https://viditx.github.io/sketchmorphism/prototypes/full-website-demo.html</a> </li> <li> <strong>GitHub Repository:</strong> <a href="https://github.com/viditx/sketchmorphism" rel="noopener noreferrer">https://github.com/viditx/sketchmorphism</a> </li> </ul> <h2> Author and Connect </h2> <p>Built by <strong>Vidit Patil</strong> (<a href="https://github.com/viditx" rel="noopener noreferrer">@viditx</a>) — a 15-year-old guy obsessed with systems and clean UI.</p> <ul> <li> <strong>GitHub:</strong> <a href="https://github.com/viditx" rel="noopener noreferrer">github.com/viditx</a> </li> <li> <strong>Instagram:</strong> <a href="https://instagram.com/vyditpvt" rel="noopener noreferrer">@vyditpvt</a> </li> <li> <strong>Telegram:</strong> <a href="https://t.me/VYDITPVT" rel="noopener noreferrer">@VYDITPVT</a> </li> </ul> <p>Check out the demo and let me know your thoughts on the design direction!</p> webdev opensource react css