엄청난 무작위 css animation

잡히 무작위 애니메이션을 만들었습니다.




사이트 : htps : ///응. 에르즈 p. rg/

코드 : htps : // 기주 b. 코 m / 에 l없이 p / ぁ ん ち め / b ぉ b / 마s r / src / 코 m 포넨 ts / 후 ct / 어서 x. 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 너무 어색하고 어쩌면 조금 무겁습니다.