めっちゃランダムな css animation

雑にランダムなアニメーションを作りました。

サイト: https://lain.elzup.org/

コード: https://github.com/elzup/lain-time/blob/master/src/components/Fact/index.js

抜粋

const kaos = p => keyframes`
  0% {
		background: linear-gradient(
			${p.r[0]}deg,
			#${p.c[0]} ${p.h[0]}%,
			transparent ${p.h[0]}%
		)
		${p.h[5]}px 0,
		linear-gradient(${p.r[1]}deg, transparent 74%, #${p.c[1]} 78%),
		linear-gradient(
			${p.r[2]}deg,
			transparent ${p.h[1]}%,
			#${p.c[2]} ${p.h[2]}%,
			#${p.c[3]} ${p.h[3]}%,
			transparent ${p.h[4]}%
		),
		#${p.c[4]};
		background-size: ${p.h[6] * 10}px ${p.h[7] * 10}px;
  }
  100% {
		background: linear-gradient(
			${p.r[1]}deg,
			#${p.c[1]} ${p.h[1]}%,
			transparent ${p.h[1]}%
		)
		${p.h[6]}px 0,
		linear-gradient(${p.r[2]}deg, transparent 74%, #${p.c[2]} 78%),
		linear-gradient(
			${p.r[3]}deg,
			transparent ${p.h[2]}%,
			#${p.c[3]} ${p.h[3]}%,
			#${p.c[4]} ${p.h[4]}%,
			transparent ${p.h[5]}%
		),
		#${p.c[5]};
		background-size: ${p.h[7] * 10}px ${p.h[0] * 10}px;
  }
`

詳しく説明はしません。する意味があるほど設計を考えて作ってないです。

一つのハッシュ値から n/16, n/256, n/4096 の値を取り出しておいて css に当てています。
上の css を当てた要素を4枚(別の値)並べてさらに位置とrotate を変えています。

サイトについて

navigator と window のシリアルと timestamp からハッシュを生成してます。ハッシュからハッシュ更新までの時間も決めています。

パターンが予測できない、誰も同じものを見れないグラフィックを作ってみたかった感じです。

animetion 雑すぎて多分ちょっと重いです。