Dynamic Bézier Curves

Last updated 358 days ago by Josh Comeau

css

First off - woohoo! This is my first published post on the new blog. I'm super excited. Thanks for checking it out! 🥂

While building this blog, I wanted it to feel whimsical, with plenty of charming interactions and animations. I built this while working on my React Europe talk, The Case for Whimsy, and so it was very much on my mind.

For example, did you notice that as you started scrolling on this page, the Bézier curves that border the green title hero thingy started flattening? Keep your eye on the swoopy curves just above the post text as you scroll through the top of the document. Notice how they become flat as they approach the header at the top of the viewport?

In a delightful bit of serendipity, I realized while building the blog that this feature would make a great first blog post!

The whole reason I started this blog was that I wanted a way to build dynamic, interactive articles that are more effective at sharing and teaching concepts. Unlike with plain text on Medium, this blog is a fully-powered React app, and so I can create and embed interactive elements that help the reader build an intuitive understanding of the subject being presented. These dynamic "flattenable" Bézier curves are a perfect subject for this format, as they have underlying complexity that would be difficult to explain with words alone.

In this maiden blog post, we'll go through the basics of working with Bézier curves and SVG in React.js. We'll learn how to build dynamic curves that respond to user input:

Read full Article