Mesh

A simple tool to create and edit mesh gradients. Mesh gradients are drawn with the wonderful implementation by @sinasamaki

Built as a Compose Desktop app, with the JetBrains Jewel UI standalone toolkit.

🔮 This README was mostly generated with Cursor.

Features

Current

• Create smooth mesh gradients with customizable control points
• Adjustable grid dimensions (2-10 rows/columns)
• Color palette management
• Precise control point positioning
• Edge point constraints
• Interactive gradient preview
• Dark theme UI using Jewel components

Future

• Export code for gradient
• Export gradient as image
• Ability to change canvas size and background color
• Allow changing resolution of gradient
• Save/load gradient configurations
• Multiple gradient presets
• Gradient animating fun
• Undo/redo functionality

Stack

• Kotlin - Primary programming language
• Compose Multiplatform - UI framework for desktop
• Jewel UI (standalone) - JetBrains design system components
• Kotlinpoet - Code generation for gradient export

Getting Started

Building and Running

1. Clone the repository
2. Run the desktop application:

./gradlew :composeApp:run

Or use the provided run configuration in .run/desktopApp.run.xml

Usage

Basic Controls

• Double-click the canvas to toggle control points visibility
• Drag control points to adjust gradient mesh
• Add colors using the color picker in the side panel
• Adjust grid using the Rows/Cols inputs
• Toggle constraints to lock edge points
• Export points points as a list of Pair<Offset, Color> objects to use in @sinasamaki's Modifier recipe
• Export as an image at 1x, 2x, or 3x scale

Color Management

Colors can be added to the palette using hex values. The application supports:

• Adding new colors
• Removing colors (minimum 1 color required)
• Selecting colors for control points via dropdown

Project Structure

The project follows a basic Compose Multiplatform structure, generated from the Kotlin Multiplatform wizard from JetBrains:

composeApp/
  ├── src/
  │   ├── commonMain/      # Shared code
  │   │   └── kotlin/
  │   └── desktopMain/     # Desktop-specific code
  │       └── kotlin/
  └── build.gradle.kts     # Desktop module configuration

License

Apache 2.0