About Doodle SVG Library
✦ DoodleMania
Give your site the charm of a hand-drawn sketchbook, minus the sketchbook. This component brings 119 doodles to life with real drawing motion. Strokes appear in sequence, just like someone's actually drawing them in front of your visitor.
✦ A Library Built for Range
From stars and hearts to full alphabets, arrows, and scribbles, 119 doodles ship ready to use. Need something specific? Drop in your own custom SVG and it inherits every texture, every animation style, every bit of the system.
✦ Five Textures Modeled on the Real Thing
This isn't a filter slapped on top. Each texture is built from the physics of how that tool actually marks a page:
Bold Marker: glossy ink with fine nib streaks
Chalk Dust: soft, powdery, catching on paper tooth
Crayon Art: waxy grain with pressure that varies stroke to stroke
Hi-Liter: translucent streaks with authentic skip spots
Soft Pencil: light graphite with a faint directional sheen
Every texture's grain runs along the stroke, not across it. A rotated rendering engine tracks each stroke's direction and aligns the pigment channels to match. It's a small detail most people won't consciously notice. They'll just feel that it looks right.
✦ Motion, On Your Terms
Enter View, Hover Over, Tap to Play, Loop Replay, or Always Drawn
Draw Lines, Fade In, Pop & Scale, Blur Reveal, or Slide Up
Stroke by Stroke, Line by Line, or All Together
Chain Flow, Fixed Gap, or Shuffle Ink for stagger rhythm
✦ Finishing Touches
Solid, Gradient, or Origin color modes (Origin respects a custom SVG's original fill and stroke)
Scatter effects: hatching, sparkles, scribbles, and more, layered around your doodle
Optional backdrop with adjustable tint and corner radius
Full control over size, weight, timing, and easing
✦ Built to Perform Static rendering support, reduced-motion respect, and viewport-aware playback mean this component looks great and behaves responsibly, whether it's one doodle or twelve scattered across a landing page.
