Alireza-Dezfoolian/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    dezfoolian.com
Colour-full force

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">

<head>
  <title>Colour-full force</title>
</head>
<style>
  svg {
    background-color: black;
  }
</style>

<body>
  <div id="content"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
  <script>
    const width = 950,
      height = 400;

    const svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

    const nodes = new Array(28).fill(null).map(v => v = {});
    nodes.forEach(v => v.r = Math.random() * 40 >> 0);

    const defs = svg.append('defs');
    const filter = defs.append('filter').attr('id', 'gooey');

    filter.append('feGaussianBlur')
      .attr('in', 'SourceGraphic')
      .attr('stdDeviation', '15')
      .attr('result', 'blur');

    filter.append('feColorMatrix')
      .attr('in', 'blur')
      .attr('mode', 'matrix')
      .attr('values', '1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -10');

    const simulation = d3.forceSimulation(nodes)
      .force('charge', d3.forceManyBody().strength(650))
      .force('center', d3.forceCenter(width / 2, height / 2))
      .force('collision', d3.forceCollide().radius(d => d.r))
      .on('tick', tick);

    const color = d3.scaleSequential(d3.interpolateRainbow).domain([0, nodes.length]);

    function tick() {
      const data = d3.select('svg')
        .selectAll('circle')
        .data(nodes);

      data.enter()
        .append('circle')
        .attr('r', d => d.r)
        .merge(data)
        .attr('cx', d => d.x)
        .attr('cy', d => d.y)
        .attr('fill', (d, i) => color(i))
        .attr('stroke', 'white')
        .attr('stroke-width', '2')
        .style("filter", (d, i) => i % 2 === 0 ? "url(#gooey)" : "none");

      data.exit().remove()
    }
  </script>
</body>

</html>
	<!DOCTYPE html>
	<meta charset="utf-8">

	<head>
	<title>Colour-full force</title>
	</head>
	<style>
	svg {
	background-color: black;
	}
	</style>

	<body>
	<div id="content"></div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
	<script>
	const width = 950,
	height = 400;

	const svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	const nodes = new Array(28).fill(null).map(v => v = {});
	nodes.forEach(v => v.r = Math.random() * 40 >> 0);

	const defs = svg.append('defs');
	const filter = defs.append('filter').attr('id', 'gooey');

	filter.append('feGaussianBlur')
	.attr('in', 'SourceGraphic')
	.attr('stdDeviation', '15')
	.attr('result', 'blur');

	filter.append('feColorMatrix')
	.attr('in', 'blur')
	.attr('mode', 'matrix')
	.attr('values', '1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -10');

	const simulation = d3.forceSimulation(nodes)
	.force('charge', d3.forceManyBody().strength(650))
	.force('center', d3.forceCenter(width / 2, height / 2))
	.force('collision', d3.forceCollide().radius(d => d.r))
	.on('tick', tick);

	const color = d3.scaleSequential(d3.interpolateRainbow).domain([0, nodes.length]);

	function tick() {
	const data = d3.select('svg')
	.selectAll('circle')
	.data(nodes);

	data.enter()
	.append('circle')
	.attr('r', d => d.r)
	.merge(data)
	.attr('cx', d => d.x)
	.attr('cy', d => d.y)
	.attr('fill', (d, i) => color(i))
	.attr('stroke', 'white')
	.attr('stroke-width', '2')
	.style("filter", (d, i) => i % 2 === 0 ? "url(#gooey)" : "none");

	data.exit().remove()
	}
	</script>
	</body>

	</html>