Hand-Drawn Scribbles
Rough SVG pattern with hand-drawn aesthetic and paper texture.
Main Features of Hand-Drawn Scribbles
How to Use Hand-Drawn Scribbles in Next.js
Installation Guide for Hand-Drawn Scribbles
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #fffbeb | Background color |
textureUrl | string | https://www.transparenttextures.com/patterns/cardboard.png | Texture image URL |
textureOpacity | number | 0.5 | Texture opacity |
patternColor | string | #000000 | Pattern color |
patternStrokeWidth | number | 2 | Pattern stroke width |
patternOpacity | number | 0.1 | Pattern opacity |
circleSize | string | 16rem | Circle size |
circleBorderColor | string | rgba(0, 0, 0, 0.1) | Circle border color |
circleBorderWidth | string | 4px | Circle border width |
circleRotationDuration | number | 10 | Circle rotation duration |
className | string | Additional CSS classes |
Related Components
Interstellar Fluid Hero
Interactive fluid simulation creating cosmic nebula effects with mouse interaction. Deep space aesthetic with animated gas clouds and star trails.
Interstellar Background Hero
Warp tunnel effect simulating high-velocity travel through nebular clusters. Procedural WebGL engine with mouse-responsive space distortion.
Liquid Chrome Hero
Procedural simulation of molten chrome alloys with velocity-based distortion. Interactive liquid metal surface with specular highlights.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QHow real is the paper texture?
It uses a high-resolution transparent pattern overlay (like cardboard or fibrous paper) to react with the background color for a realistic tactile feel.
QCan I change the scribble colors?
Yes, you can customize the `patternColor` to mimic different types of ink, from charcoal black to blue ballpoint pen.
QAre the circles animated?
Yes, the hand-drawn circles rotate slowly on independent paths to add a gentle sense of organic life to the background.