conic-gradientを使ったパレットUIを作ってみよう

こんにちわ。nap5です。

今回はconic-gradientを使ったパレットUIの作り方の一つを紹介します。

canvaに見られるあのUIですね。

conic-gradientを使ったなにかデモを作ってみたいと思い、チャレンジしてみました。

conic-gradient() - CSS: カスケーディングスタイルシート | MDN

デモサイトです。

Hello React!

デモコードです。

Glitch Code Editor ･ﾟ✧

上記デモが参照できない場合はcodesandboxに配備したものを参照してくだ
さい。

デモサイトです。

Vite App

デモコードです。

keen-shape-ygdcm7 - CodeSandbox

デモ動画です。

Loom | Free Screen & Video Recording Software

使用したライブラリは以下になります。

API Reference · culori

D3 by Observable | The JavaScript library for bespoke data visualization

Documentation | Framer for Developers

コードも公開しているので、細かいのはそちらを見ていただくことにして、ポイントとなる点を抜粋します。

const makeConicGradient = ({
  startRange,
  endRange,
  colorCount,
  offset,
  jointColor,
  colorInterpolator,
}) => {
  const angleInfo = [...samples(colorCount)].reduce(
    (acc, t, idx) => {
      const currentAngle =
        acc.prev + (endRange - startRange - offset) / colorCount;
      acc.list.push({
        color: colorInterpolator(transform([0, 1], [0.1, 0.9])(t)),
        angleFrom: acc.prev,
        angleTo: currentAngle,
      });
      acc.prev = currentAngle;
      return acc;
    },
    {prev: offset, list: []}
  );
  const minAngle = Math.min(...getDomain(angleInfo.list, 'angleFrom'));
  const maxAngle = Math.max(...getDomain(angleInfo.list, 'angleTo'));
  const resultList = [];
  resultList.push(`${jointColor} ${minAngle}deg`);
  for (let i = 0; i < angleInfo.list.length; i++) {
    const item = angleInfo.list[i];
    resultList.push(`${item.color} ${item.angleFrom}deg`);
    resultList.push(`${item.color} ${item.angleTo}deg`);
  }
  resultList.push(`${jointColor} ${maxAngle}deg`);
  return resultList.join(',');
};

使い方は以下のような感じです。

d3から提供されている関数を使った例がこちらです。

  const bebopConicGradient = makeConicGradient({
    startRange: 0,
    endRange: 320,
    colorCount: 5,
    offset: 20,
    jointColor: d3.interpolateRdYlBu(1),
    colorInterpolator: d3.interpolateRdYlBu,
  });

カスタムしたインターポレーター関数を使った例がこちらです。

color huntの配色を生かせるように心がけてみました。

Color Palettes for Designers and Artists - Color Hunt

const bebopColorInterpolator = (t) => {
    const info = interpolate(['#FFE3A9', '#FFC3C3', '#FF8C8C', '#FF5D5D'])(t);
    return formatHex(info);
  };
  const bebopConicGradient = makeConicGradient({
    startRange: 0,
    endRange: 320,
    colorCount: 5,
    offset: 20,
    jointColor: bebopColorInterpolator(1),
    colorInterpolator: bebopColorInterpolator,
  });

見よう見まねでやってみたんですが、なかなか難しかったですね。

それっぽいUIにはなったんじゃないでしょうか。

最近では、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。

Tweets by napzak5

最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。

FaunaDBを使用したRSSキュレーションミニシステムの構築

また、コースの内容紹介記事は以下になります。

簡単ですが、以上です。