A premium, interactive avatar creation platform to generate personalized avatars, AI-powered profile art, and custom share cards.
Overview • Features • Screenshots • Tech Stack • Quick Start • Roadmap
Avatari is a fast, creative, and highly responsive web application designed for creators, developers, students, and anyone looking for a unique digital identity instantly.
- Zero friction: No registration, database setup, or API keys required to start creating.
- Versatile styles: Switch between classic vector avatars and state-of-the-art AI generation.
- Interactive tools: Draw from scratch or trace over existing templates.
- Social ready: Download high-resolution PNGs or custom styled cards to share on your social profiles.
Create custom procedural SVG avatars or prompt-based AI art in seconds.
- 🧬 Vibe-based Generation: Change seeds, styles, and mood colors dynamically.
- 🕶️ Deep Customization: Personalize accessories (Glasses, Cap), facial expressions (Smile, Neutral, Happy, Cool), hair color, clothing color, and skin tone (featuring a Custom color picker). Compatibility options automatically adjust depending on the selected avatar style.
- 🤖 AI Art Styles: Input custom descriptions to prompt stunning art styles instantly.
- ⚡ Instant Export: Save your avatars directly to your local device with one click.
An advanced vector-based drawing board built with Fabric.js that offers full object-oriented control.
- 📐 Drawing & Shapes: Draw freehand or insert editable shapes (rectangles, circles, lines).
- 🔄 Object Manipulation: Select, move, scale, rotate, and delete canvas elements on the fly.
- 🎨 Color Control: Dynamic color picker for custom stroke, fill, and size styles.
Turn your avatar into a beautiful, social-media-ready profile card.
- ✍️ Add custom quotes, descriptions, or handles.
- 💾 High-resolution PNG export with perfect scaling.
The sleek generator layout lets you customize styles, name seeds, and regenerate instantly.
Switch over to the drawing tab to build unique, customized vector art on an interactive board.
Avatari is built using a modern frontend architecture to ensure speed, accessibility, and high performance.
| Category | Technology | Description |
|---|---|---|
| Core Framework | React 18 | Component-driven UI rendering |
| Build Tool | Vite | Ultra-fast build tool and dev server |
| Styling | Tailwind CSS | Modern utility-first CSS styling |
| Canvas Engine | Fabric.js | HTML5 canvas library & SVG-to-canvas parser |
| Procedural Avatars | DiceBear API | Avatar generation API |
| AI Art Engine | Pollinations.ai | High-speed prompt-to-image API |
Follow these steps to run the application locally on your machine.
git clone https://github.com/NBR-24/Avatari.git
cd Avatarinpm installnpm run devOnce started, open http://localhost:5173 in your browser to view the application.
npm run buildThe production bundle will be built inside the /dist directory.
- 🔄 User Accounts — Save, manage, and retrieve your favorite avatar designs.
- 🌐 Community Gallery — Share your custom creations and explore other users' avatars.
- 🎬 Animated Avatars — Add dynamic animation effects and transitions.
- 🧠 Advanced AI Filters — More detailed style parameters and prompts.
- 📱 Mobile App Version — Tailored layout optimization for mobile devices.
Contributions make the open-source community an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Developed with 💖 by Navami B R
- 🔗 GitHub: @NBR-24