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