@charset "utf-8";
/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
body {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  --ux: calc(100vw/var(--n-lines));
  --uy: calc(100vh/var(--n-lines));
  margin: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  filter: contrast(5);
}
body:after {
  color: #fff;
  font: 9vmin segoe script, cursive;
  filter: blur(1px);
  content: "Hello Chinaz!";
}

.line {
  --cidx: calc(var(--n-lines) - var(--idx));
  --q: calc(1 - var(--p));
  --s: calc(1 - 2*var(--p));
  --w: calc((var(--q)*var(--idx) + var(--p)*var(--cidx))*var(--ux));
  --h: calc((var(--p)*var(--idx) + var(--q)*var(--cidx))*var(--uy));
  position: absolute;
  top: calc(var(--j)*(100vh - var(--h)));
  left: calc(var(--i)*(100vw - var(--w)));
  width: var(--w);
  height: var(--h);
  mix-blend-mode: screen;
  filter: blur(4px);
}

.blot {
  --ck: calc(var(--n-blots) - var(--k) - 1);
  --u: calc(100%/(var(--n-blots) - 1));
  position: absolute;
  top: calc((var(--j)*var(--k) + (1 - var(--j))*var(--ck))*var(--u));
  left: calc(((1 - var(--i))*var(--k) + var(--i)*var(--ck))*var(--u));
  margin: -1em;
  padding: 1em;
  border-radius: 50%;
  background: HSL(calc(var(--k)*360/var(--n-blots)), 100%, 75%);
  animation: s 0.5s ease-in-out calc(var(--k)/var(--n-blots)*-2s + var(--idx)/var(--n-lines)*-1s) infinite alternate;
}

@keyframes s {
	  to {
		transform: scale(0.1);
	}
}

:root {
	--n-lines: 8;
	--n-blots: 16;
		--i: 0;
	--j: 0;
	--p: 0;
}
.line:nth-of-type(n + 9):nth-of-type(-n + 16), 
.line:nth-of-type(n + 25) { --p: 1 }
.line:nth-of-type(n + 9):nth-of-type(-n + 24) { --i: 1 }
.line:nth-of-type(n + 17) { --j: 1 }.line:nth-of-type(8n + 1) { --idx: 0 }.line:nth-of-type(8n + 2) { --idx: 1 }.line:nth-of-type(8n + 3) { --idx: 2 }.line:nth-of-type(8n + 4) { --idx: 3 }.line:nth-of-type(8n + 5) { --idx: 4 }.line:nth-of-type(8n + 6) { --idx: 5 }.line:nth-of-type(8n + 7) { --idx: 6 }.line:nth-of-type(8n + 8) { --idx: 7 }.blot:nth-child(1) { --k: 0 }.blot:nth-child(2) { --k: 1 }.blot:nth-child(3) { --k: 2 }.blot:nth-child(4) { --k: 3 }.blot:nth-child(5) { --k: 4 }.blot:nth-child(6) { --k: 5 }.blot:nth-child(7) { --k: 6 }.blot:nth-child(8) { --k: 7 }.blot:nth-child(9) { --k: 8 }.blot:nth-child(10) { --k: 9 }.blot:nth-child(11) { --k: 10 }.blot:nth-child(12) { --k: 11 }.blot:nth-child(13) { --k: 12 }.blot:nth-child(14) { --k: 13 }.blot:nth-child(15) { --k: 14 }.blot:nth-child(16) { --k: 15 }