デレステのメニュー背景にあるあの輪っか

導入方法

<head>~</head>間に <script defer src=""></script> と記述
<body>~</body>間に <imascgss-thatring></imascgss-thatring> と記述
【オプション】属性を追加する
1. data-colors 設定色。#xxxxxx形式、カンマ区切りで6色以上。指定なしはソレっぽい色になる。
2. data-json 形状指定。JSONにおける配列の記法を使う。
  [ [ <半径>,<幅>,<内側の形状=[]>,<外側の形状=[]> ], ...]
  全ての値は 0以上の整数。単位は無くいわゆる比率で表す(円自体の画面上の大きさはCSS変数で指定するため)。
  半径と幅は直前の円からの増分、省略不可。
  内側の形状と外側の形状は「現在の円周を使う角度」と「ひとつ前の円周を使う角度」を交互に入力、省略可能。
3. data-turn 回転方向。指定なしは無回転、="left"で左回り、="right"で右回り。
【オプション】CSS変数で大きさなどを変更する
1. --length-size 輪の大きさ。<length>型を与える。
  既定値は50vmin。
2. --time-per-turn 1回転当たりの時間。<time>型を与える。
  既定値は10s。

⬇デフォルト(だと相対サイズになります)⬇

<imascgss-thatring></imascgss-thatring>

⬇指定ありでそれっぽいの(500px、1周120秒、反時計回りに設定。)⬇

<imascgss-thatring

 style="--length-size:500px;--time-per-turn:120s"

 data-colors ="#d995ac,#f59fa0,#ffb195,#ffc887,#f9e08a,#d9d784,#8dd3ad,#71c5be,#71b1c7,#7e9dc3,#9c95c1,#b48fb5"

 data-json ="[

  [150,1],

  [7,2],

  [4,14,[1,5,3,7,9,2,3,2,8,3,11,3,5,3,2,3,8,5,1,6,4,7,6,5],[]],

  [0,10,[],[2,3,1,2,2,2,1,4,5,1,2,3,1,2,2,2,1,4,5,1]],

  [2,3],

  [6,1]

 ]"

 data-turn="left"

></imascgss-thatring>