Ever wondered how your scribbles on Snapchat turns into a smooth line, or how the pen tool works in Figma or Procreate? In this talk we'll dive into the invisible art of line-drawing algorithms.

We'll start from the historical pixel-based methods to the tools that we use today, wrapping up with real-world examples.

The techniques described are evergreen, timeless and cross-platform.

Rough.js is an awesome open-source library for creating vector graphics with a hand-drawn feel. In this talk, we’ll look at how I extended Rough.js to support animations for a personal project. First, we’ll take a tour of the Rough.js ecosystem and look at how the React bindings work. We’ll see how you can render fonts with Rough.js as well. Then we’ll examine how SVG line animations work, methods for creating staggered animations with JavaScript and CSS, and how to orchestrate larger groups of animated elements. We’ll also discuss strategies for forking open-source libraries and consuming them in your own project.

We recently re-wrote our selection feature for tldraw, a digital whiteboard. To make it work, we first needed to teach our whiteboard to see the canvas without first rendering it, and then to capture the (surprisingly! extraordinarily!) complex logic behind a simple click.

In this talk, we’ll explore the performance limits of SVG when rendering scatter charts with thousands of data points, based on our experience at MUI X Charts. You’ll learn how to identify bottlenecks, performance measuring tricks, and the techniques we use to optimize rendering.