Visual stories on news websites are the beauties of modern data storytelling.

Such effective articles reach millions of readers, are created in a short amount of time, and need to run on a plethora of different devices.

Let's have a technical look under the hood of some real-world news stories and experience (at least) three magic Svelte tricks to create stunning visuals.

Did you ever need a hamburger menu icon and you you looked out for one in an icon library? Actually, it's only a few lines of code with SVG. And SVGs combined with React open up a whole new world. You can generate diagram, graphics or animation, make an interactive game or app. Let's walk through the basics of the syntax.

Love linking lines? Join Steve in considering the humble arrow as both a programming problem and a user experience challenge. In this talk, he'll present the many complex problems and solutions that he has encountered when working with arrows in his open source library perfect-arrows and later in tldraw (tldraw.com). With a narrow scope and plenty of animations to guide the way, we'll look at intersections, arrow heads, arrow head angles, and all of the different user interface issues behind authoring and adjusting arrows between shapes, other shapes, and points.