e1blue · June 12, 2018 13:51
diff --git a/flow-1.markdown b/flow-1.markdown
diff --git a/index.html b/index.html
 <css-doodle>
  :doodle {
    @grid: 80x1 / 100vmax; 
  }
  
  :container {
    transform: 
      rotate(45deg) scale(4.6)
      translate(-10%, -15%);
  }
  
  @place-cell: center;
  @size: calc(
    100% - @calc(@index() -1 ) * 100% / @size()
  );
  
  transform: rotate(@rand(-2deg, 2deg, .1));
  border-radius: @rand(28%, 35%, .1);
  background: @pick(
    #2fc5cc, #6df1cc, #e3ffc3, #29252c
  );
 </css-doodle>
diff --git a/script.js b/script.js
 document.body.addEventListener('click', function(e) {
  e.target.update && e.target.update();  
 });
diff --git a/scripts b/scripts
 <script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.3.0/css-doodle.min.js"></script>
diff --git a/style.css b/style.css
 html, body {
  margin: 0;
  overflow: hidden;
 }
	<css-doodle>
	:doodle {
	@grid: 80x1 / 100vmax;
	}

	:container {
	transform:
	rotate(45deg) scale(4.6)
	translate(-10%, -15%);
	}

	@place-cell: center;
	@size: calc(
	100% - @calc(@index() -1 ) * 100% / @size()
	);

	transform: rotate(@rand(-2deg, 2deg, .1));
	border-radius: @rand(28%, 35%, .1);
	background: @pick(
	#2fc5cc, #6df1cc, #e3ffc3, #29252c
	);
	</css-doodle>
	document.body.addEventListener('click', function(e) {
	e.target.update && e.target.update();
	});