GitNoise/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      margin:0;
      position:fixed;
      top:0;
      right:0;
      bottom:0;
      left:0;
      background: rgba(0, 0, 0, 0.7);
      padding: 100px;
    }

    svg {
      background: rgba(0, 0, 0, 0.2);
      border: 1px solid #2d2d2d
    }

    .stop1 { stop-color:  #00E5EE;    }
    .stop2 { stop-color:  #00E5EE; stop-opacity: 0; }

    .stop3 { stop-color:  #fff; stop-opacity: 1 }
    .stop4 { stop-color:  #fff; stop-opacity: 0.9; }
    .stop5 { stop-color:  #fff; stop-opacity: 0.1;}
  </style>
</head>

<body>
  <svg>
     <defs>
     	<radialGradient id="RadialGradient1">
        <stop class='stop1' offset="0%"/>
        <stop class='stop2' offset="100%"/>
      </radialGradient>
       <radialGradient id="RadialGradient2">
        <stop class='stop3' offset="0%"/>
        <stop class='stop4' offset="80%"/>
        <stop class='stop5' offset="100%"/>
      </radialGradient>
    </defs>
  </svg>

  <script>
		var svg = d3.select('svg')
        .attr('width', 315)
        .attr('height', 315);

    function dot (selection, size, position, cssName) {
      var g = selection.append("g");
      g.append('circle')
      	.attr('cx', position.x)
      	.attr('cy', position.y)
      	.attr('r', size)
      	.classed(cssName, true)
      	.style('fill', 'url(#RadialGradient1)');

      g.append('circle')
      	.attr('cx', position.x)
      	.attr('cy', position.y)
      	.attr('r', size*.3)
        .classed('center', true)
        .style('fill-opacity', 0.9)
      	.style('fill', 'url(#RadialGradient2)');
    }
    function randomBox(x0, y0, x1, y1) {
    	return {
        x: Math.floor(Math.random() * x1) + x0,
        y: Math.floor(Math.random() * y1) + y0,
      }
    }

    function random(max, min) {
      console.log(Math.floor(Math.random() * max) + min);
    	return Math.floor(Math.random() * max) + min;
    }

    for(var i=0; i<500; i++) {
    	dot(svg, random(10,2), randomBox(10,10, 300, 300), 'glow');
    }

  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body {
	margin:0;
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background: rgba(0, 0, 0, 0.7);
	padding: 100px;
	}

	svg {
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid #2d2d2d
	}

	.stop1 { stop-color: #00E5EE; }
	.stop2 { stop-color: #00E5EE; stop-opacity: 0; }

	.stop3 { stop-color: #fff; stop-opacity: 1 }
	.stop4 { stop-color: #fff; stop-opacity: 0.9; }
	.stop5 { stop-color: #fff; stop-opacity: 0.1;}
	</style>
	</head>

	<body>
	<svg>
	<defs>
	<radialGradient id="RadialGradient1">
	<stop class='stop1' offset="0%"/>
	<stop class='stop2' offset="100%"/>
	</radialGradient>
	<radialGradient id="RadialGradient2">
	<stop class='stop3' offset="0%"/>
	<stop class='stop4' offset="80%"/>
	<stop class='stop5' offset="100%"/>
	</radialGradient>
	</defs>
	</svg>

	<script>
	var svg = d3.select('svg')
	.attr('width', 315)
	.attr('height', 315);

	function dot (selection, size, position, cssName) {
	var g = selection.append("g");
	g.append('circle')
	.attr('cx', position.x)
	.attr('cy', position.y)
	.attr('r', size)
	.classed(cssName, true)
	.style('fill', 'url(#RadialGradient1)');

	g.append('circle')
	.attr('cx', position.x)
	.attr('cy', position.y)
	.attr('r', size*.3)
	.classed('center', true)
	.style('fill-opacity', 0.9)
	.style('fill', 'url(#RadialGradient2)');
	}
	function randomBox(x0, y0, x1, y1) {
	return {
	x: Math.floor(Math.random() * x1) + x0,
	y: Math.floor(Math.random() * y1) + y0,
	}
	}

	function random(max, min) {
	console.log(Math.floor(Math.random() * max) + min);
	return Math.floor(Math.random() * max) + min;
	}

	for(var i=0; i<500; i++) {
	dot(svg, random(10,2), randomBox(10,10, 300, 300), 'glow');
	}

	</script>
	</body>