Back to all blogs
#frontend
#svg
#animation
#canvas
December 11, 2025
4 min read
A blog post byThereallo

Reverse Engineering Cloudflare's Vector Footer

Recreating Cloudflare's vector footer using Paper.js

workers.cloudflare.com has a simple vector graphic in the footer. You grab a point, you drag it, it distorts. You let go, and it satisfyingly bounces back to its original shape. It feels tactile.
I didn't just want to look at it. I wanted to steal it.
So I opened DevTools, dug into the minified spaghetti, and spent the next 48 hours relearning vector math. Here is how Cloudflare built the best footer on the web.

My first assumption was Three.js or maybe Rive. I was wrong.
They're using Paper.js.
If you haven't heard of Paper.js, I don't blame you. It's an open-source vector graphics scripting framework that peaked around 2016. It's powerful, but seeing it used in a modern production site in 2025 was a surprise.
I scraped the minified logic and tried to get a basic version running. It looked terrible.
The lines were too thin. The handles were impossible to grab. And when I tried to animate it, the whole thing fell apart.

The first hurdle was the visual style. Cloudflare's footer looks like a CAD drawing or a blueprint. You can see the Bezier handles and the anchor points.
I spent hours trying to manually draw circles at every vertex. Then I read the Paper.js documentation.
javascript
path.fullySelected = true;
path.selectedColor = '#EBD5C1';
They are enabling the debug mode of Paper.js (fullySelected) and changing the selection color to match the stroke color. It's a brilliant hack. They turned the developer tooling into the design language. A beautiful UI/UX decision in my opinion.

Getting it to render was easy. Getting it to move was hard. Getting it to bounce back? That was a nightmare.
The behavior seems simple:
  1. User drags a point (or the whole shape).
  2. User releases mouse.
  3. Wait 2 seconds.
  4. Animate everything back to the start.
My first attempt saved the original position of every point. When the timer fired, I lerped the points back to originalPosition.
But if I dragged the entire shape to the right, and then distorted a point, the animation broke. The points tried to fly back to the center of the screen (Global Coordinates) while the shape was sitting on the right. The result was the SVG exploding into a mess of crossed lines.
The fix required separating the Body from the Segments.
I had to track the points in Local Coordinates relative to the shape's center.
javascript
// saving state
path.segments.forEach(seg => {
  originalLocalPositions.set(seg, {
    // convert absolute point to local relative to path
    point: path.globalToLocal(seg.point), 
    handleIn: seg.handleIn.clone(),
    handleOut: seg.handleOut.clone()
  });
});
When animating back, I had to calculate the target position in local space, then convert it back to global space for the renderer.
javascript
if (anim.type === 'localPoint') {
  anim.target.point = anim.parentPath.localToGlobal(newVal);
}
This allows the shape to "heal" itself regardless of where it is on the canvas.

When I scaled the SVG down for mobile, the lines became microscopic.
Paper.js scales stroke width by default. If you scale a 100px square down to 10px, the 2px border becomes 0.2px.
Cloudflare fixed this with one property that I missed for hours:
javascript
path.strokeScaling = false;
This forces the renderer to recalculate the stroke width after the transformation matrix is applied. The logo stays crisp whether it's massive or tiny.

Cloudflare's implementation feels "sticky." You drag handles to twist curves.
I had to rewrite the hit-testing logic to prioritize handles over the body. If you don't do this, clicking a handle usually triggers a "body drag" because the handle is technically inside the shape's bounding box.
javascript
let hit = paper.project.hitTest(event.point, {
  handles: true,
  tolerance: 30
});

if (!hit) {
  hit = paper.project.hitTest(event.point, {
    segments: true,
    tolerance: 30
  });
}

if (!hit) { ... }

After fixing the coordinate systems, disabling stroke scaling, and tuning the easeOutCubic function, An (almost) pixel-perfect recreation of the Cloudflare footer.
It's a useless component, it adds zero functionality, it probably hurts their lighthouse score.
But it's fun.

Footer Demo

0:00 / 0:00
The web has become so flat and static. We optimize everything for conversion rates and bundle sizes. Sometimes, you just need a vector logo that wobbles when you poke it.
I put the full source code on CodePen. Use it to annoy your users, or just stare at it like I did.
Link to CodePen