├── .gitignore ├── .npmignore ├── .prettierrc ├── .vscode └── extensions.json ├── README.md ├── index.html ├── lib ├── Gradient.js ├── index.d.ts └── index.js ├── package.json ├── public └── favicon.png ├── src ├── App.vue ├── assets │ └── logo.png ├── components │ ├── editor.vue │ ├── jscode.js │ └── script.js ├── env.d.ts └── main.ts ├── tsconfig.json ├── vite.config.ts └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | .vscode -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | .vscode 3 | public -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "useTabs": false 4 | } 5 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["johnsoncodehk.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Whatamesh 2 | 3 | Easily create mesh gradients like Stripe. 4 | 5 | This project wouldn't be possible without stripe and https://kevinhufnagl.com/ 6 | 7 | ## Live Demo 8 | 9 | [https://whatamesh.vercel.app/](https://whatamesh.vercel.app/) 10 | 11 | ## Getting started 12 | 13 | ### Creating your first gradient 14 | 15 | ```html 16 | 17 | ``` 18 | 19 | ```js 20 | import { Gradient } from "whatamesh"; 21 | 22 | const gradient = new Gradient(); 23 | gradient.initGradient("#gradient-canvas"); 24 | ``` 25 | 26 | ```css 27 | #gradient-canvas { 28 | width: 100%; 29 | height: 100%; 30 | --gradient-color-1: #449ce4; 31 | --gradient-color-2: #2f8bc1; 32 | --gradient-color-3: #ccbeee; 33 | --gradient-color-4: #4c57f6; 34 | } 35 | ``` 36 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 |
42 | 1. Create a Gradient.js
file somewhere in your project and
43 | add
44 |
48 | this
49 |
50 | inside
51 |
2. Add the following code to your project:
53 |55 | {{ htmlCode }} 56 |57 |
59 | {{ cssCode }} 60 |61 |
63 | import { Gradient } from './Gradient.js' 64 | 65 | // Create your instance 66 | const gradient = new Gradient() 67 | 68 | // Call `initGradient` with the selector to your canvas 69 | gradient.initGradient('#gradient-canvas') 70 |72 |