SVG Flow Scroll v2

Scroll-driven SVG stroke wipe

About this Component

Haytham SVG Strokes is a responsive scroll-driven SVG animation that draws a layered set of sweeping strokes across the frame, optionally holds the covered state, then erases them as scrolling continues. Use it as a bold section transition, portfolio moment, hero overlay, or full-frame visual effect.

Perfect For: • Creative portfolios and agency sites • Hero and section transitions • Editorial and campaign pages • Scroll-led storytelling • Experimental landing pages

Key Features: • 13 individually customizable SVG stroke colors • Adjustable stroke width, outline, opacity, overscan, and SVG fit • Gradient, solid, or responsive image backgrounds • Original, sequential, and reverse draw orders • Draw time, stagger, timing variation, and hold controls • Scroll smoothing, start/end range, fallback length, and invert mode • Responsive sizing across desktop, tablet, and mobile • Static Canvas/export rendering and offscreen animation pausing for better performance

How It Works

Place the component in your layout and scroll to drive the stroke timeline. For a longer cinematic sequence, place it inside a sticky frame within a taller scrolling section. Start and End control where the animation runs, while Smoothing controls how closely the strokes follow scroll progress.

Questions? Reach out at [email protected]

Refund Policy

All sales are final upon purchase as this is a non-tangible digital product. A refund is offered only if the component suffers a critical technical failure that prevents its core function and cannot be resolved within a reasonable timeframe. Refunds are not issued for buyer's remorse, aesthetic preference, or modifications made after purchase. Report confirmed technical failures with evidence within 14 days of purchase.