アニメーションするグラデーションメッシュを作成、コードを発行してくれるジェネレーター・「whatamesh」

whatamesh

whatameshはアニメーションするグラデーションメッシュを作成、コードを発行してくれるジェネレーターです。

2021年9月現在、Stripeのヘッダに使われているようなやつを作れる、みたいなアプリです。

任意のカラーを4色選んでget codeボタンをクリックするとCSSやHTML、JSのコードが発行されます。以下はサンプルです。

#gradient-canvas {
  width:100%;
  height:100%;
  --gradient-color-1: #c3e4ff; 
  --gradient-color-2: #6ec3f4; 
  --gradient-color-3: #eae2ff;  
  --gradient-color-4: #b9beff;
}

👆CSS

<canvas id="gradient-canvas" data-transition-in>
 </canvas>

👆HTML

import { Gradient } from './Gradient.js'
 
// Create your instance
const gradient = new Gradient()
 
// Call `initGradient` with the selector to your canvas
gradient.initGradient('#gradient-canvas')

👆JavaScript

Gradient.jsはGistにあります。

whatamesh

whatamesh

Resources & Tools

OSS

AI

CSS snippet

JavaScript snippet

WordPress Code