readme-animated-sweetbanner

KO | EN

gitlite — search

#python #java #python3 #arduino #golang #machine-learning #rust #html #flask #javascript #seismology #nodejs

readme-animated-sweetbanner

★ 63 Open GitHub ↗

A tool to create aesthetic animated banners using SVG for your github profile.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center">Animated Sweet Banner</h1>

<p align="center">
    A web-based editor for creating animated SVG banners for GitHub profiles. Build custom sweet banners with meteors, glowing avatars, and animated effects.
</p>

## Example

![Sweet Banner Example](https://github.com/user-attachments/assets/484c1d55-7321-4c2b-9d99-0648f5c7e92f)

## Features

- **Animated Meteors** - Add flying icon meteors with customizable trails, colors, and timing
- **Avatar Integration** - Display your GitHub avatar with animated glow effects
- **Live Preview** - See changes in real-time as you edit
- **SVG Export** - Download or copy the generated SVG code
- **Customizable Effects** - Adjust waves, particles, borders, and gradients

## Tech Stack

- React 19 + TypeScript
- Vite
- Tailwind CSS
- shadcn/ui components
- Lucide icons

## Getting Started

```bash
# Install dependencies
bun install

# Start development server
bun run dev

# Build for production
bun run build
```

## Usage

1. Configure banner dimensions and background color
2. Set your avatar URL and size
3. Add meteors with icons from Iconify
4. Customize colors, timing, and animation properties
5. Copy the SVG code or download the file
6. Add just the banner line at the end of the copied SVG code to the beginning of your Repos Readme.md, you can also **just drag and drop the svg file**
    ```markdown
    ![banner(1)](https://github.com/user-attachments/assets/...)
    ```

## Icon Libraries

- **[Iconify](https://iconify.design/)** - Icons aggregator. +50k icons

## Configuration Options

| Setting    | Description                               |
| ---------- | ----------------------------------------- |
| Border     | Border size, angle, and color             |
| Background | Solid color background                    |
| Avatar     | GitHub avatar URL and size                |
| Meteors    | Icon, trail color, angle, duration, delay |
| Particles  | Floating particle count and color         |
| Waves      | Animated wave gradient colors             |
| Glow       | Avatar glow gradient colors               |
| Border     | Optional border with radius and size      |

## License

MIT

readme-animated-sweetbanner

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README