Implementing Figma's Glass Effect with SVG Filters

A practical breakdown of Figma's glass effect, from refraction and frost to the SVG filters that recreate it in the browser.

How <Activity> Works During React’s Render and Commit

An in-depth look at how <Activity> works within React’s render and commit phases, exploring its mechanism and internal implementation.

A Complete Guide to Gas for ERC-4337 Wallets

From executing UserOperations to estimating and displaying gas fees, this guide covers everything you need to know about gas in the ERC-4337 ecosystem.

Create Development Builds Without an Apple Developer Program

By leveraging a coworker's credentials and building locally with Expo and EAS, I managed to install development builds on my iPhone without enrolling in the Apple Developer Program myself.

How Privy Secures and Recovers Private Keys

A deep dive into Privy’s wallet infrastructure, key sharding, and cross-device recovery

Onboarding Web2 and Web3 Users Seamlessly with Privy

Privy is a powerful tool that simplifies onboarding for both Web2 and Web3 users. In this blog post, I’ll walk through how I’ve integrated it, the challenges I faced, and how I solved them.

Simulating Heartbeat with SVG Animation

Canvas Heartbeat

To resemble a real heartbeat on an oscilloscope, the heartbeat line should appear and disappear at both x-axes, staying straight on both sides with a curved center, and a glow effect.

Generative Animated SVG - Color

Scroll Origins NFT

A solid color works, but adding a rainbow line and background makes the SVG more visually appealing.

Generative Animated SVG - Formula & Descriptions

Scroll Origins NFT

Explore Text Rendering in SVG

Generative Animated SVG - Curve

Scroll Origins NFT

To generate three types of SVGs, each one showcases a curve generated by a cubic (with 2 inflection points), quartic (with 3 inflection points), or quintic (with 4 inflection points) function, paired with one of three background colors: rust, cyan, or beige.