paulaanhaanen/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Branding option for Cubik using links of a network diagram inside letters.
Based on the force-directed graph and applying a linear gradient. In addition use of SVG text as a clipping mask.

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

svg {
  background-color: #333;
}

.links line {
  stroke: url(#gradient);
}

#alpha{
  fill: rgb(255,255,255);
}

#base {
  fill: #333;
  mask: url(#mask);
}

.title {
  font-family: 'Open Sans', sans-serif;
  font-size: 20em;
  text-anchor: middle;
}

#title-outline {
  fill:none;
  stroke: url(#gradient);
  stroke-width: 1.5px;
}

</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.0.0-alpha.40.min.js"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    title = 'Cubik',
    numberOfNodes = 1000;

svg.append("linearGradient")
  .attr("id", "gradient")
  .attr("gradientUnits", "userSpaceOnUse")
  .selectAll("stop")
  .data([
    {offset: "0%", color: "#18FFFF"},
    {offset: "50%", color: "#7C4DFF"},
    {offset: "100%", color: "#FF4081"}
  ])
  .enter().append("stop")
  .attr("offset", function(d) { return d.offset; })
  .attr("stop-color", function(d) { return d.color; });

var mask = svg.append("defs")
  .append("mask")
  .attr("id", "mask")
  .attr("x", 0)
  .attr("y", 0)
  .attr("width", "100%")
  .attr("height", "100%");

mask.append("rect")
  .attr("id", "alpha")
  .attr("width", "100%")
  .attr("height", "100%");

mask.append("text")
  .attr("class", "title")
  .attr("x", "50%")
  .attr("y", "60%")
  .text(title);

var simulation = d3.forceSimulation()
  .force("link", d3.forceLink().id(function(d) { return d.id; }))
  .force("charge", d3.forceManyBody())
  .force("center", d3.forceCenter(width / 2, height / 2));

var nodes = d3.range(numberOfNodes).map(function(i){ return {id: i}; });

var links = [];

d3.range(numberOfNodes).forEach(function(i){
    links.push({source: i, target: (i + 1) % numberOfNodes});
    links.push({source: i, target: i * 7 % numberOfNodes});
});

var link = svg
  .append("g")
  .attr("class", "links")
  .selectAll("line")
  .data(links)
  .enter()
  .append("line");

simulation
  .nodes(nodes)
  .on("tick", ticked);

simulation
  .force("link")
  .links(links);

svg.append('rect')
  .attr("id", "base")
  .attr("width", "100%")
  .attr("height", "100%");

svg.append("text")
  .attr("id", "title-outline")
  .attr("class", "title")
  .attr("x", "50%")
  .attr("y", "60%")
  .text(title)

setInterval(moveNodes, 5000);

function ticked() {
  link
    .attr("x1", function(d) { return d.source.x; })
    .attr("y1", function(d) { return d.source.y; })
    .attr("x2", function(d) { return d.target.x; })
    .attr("y2", function(d) { return d.target.y; });
}

function moveNodes() {
  nodes.forEach(function(d){
    d.vx = Math.random() * 2 - 2;
    d.vy = Math.random() * 2 - 2;
  })
  simulation.alphaTarget(0.1).restart();
}

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	svg {
	background-color: #333;
	}

	.links line {
	stroke: url(#gradient);
	}

	#alpha{
	fill: rgb(255,255,255);
	}

	#base {
	fill: #333;
	mask: url(#mask);
	}

	.title {
	font-family: 'Open Sans', sans-serif;
	font-size: 20em;
	text-anchor: middle;
	}

	#title-outline {
	fill:none;
	stroke: url(#gradient);
	stroke-width: 1.5px;
	}

	</style>
	<svg width="960" height="600"></svg>
	<script src="https://d3js.org/d3.v4.0.0-alpha.40.min.js"></script>
	<script>

	var svg = d3.select("svg"),
	width = +svg.attr("width"),
	height = +svg.attr("height"),
	title = 'Cubik',
	numberOfNodes = 1000;

	svg.append("linearGradient")
	.attr("id", "gradient")
	.attr("gradientUnits", "userSpaceOnUse")
	.selectAll("stop")
	.data([
	{offset: "0%", color: "#18FFFF"},
	{offset: "50%", color: "#7C4DFF"},
	{offset: "100%", color: "#FF4081"}
	])
	.enter().append("stop")
	.attr("offset", function(d) { return d.offset; })
	.attr("stop-color", function(d) { return d.color; });

	var mask = svg.append("defs")
	.append("mask")
	.attr("id", "mask")
	.attr("x", 0)
	.attr("y", 0)
	.attr("width", "100%")
	.attr("height", "100%");

	mask.append("rect")
	.attr("id", "alpha")
	.attr("width", "100%")
	.attr("height", "100%");

	mask.append("text")
	.attr("class", "title")
	.attr("x", "50%")
	.attr("y", "60%")
	.text(title);

	var simulation = d3.forceSimulation()
	.force("link", d3.forceLink().id(function(d) { return d.id; }))
	.force("charge", d3.forceManyBody())
	.force("center", d3.forceCenter(width / 2, height / 2));

	var nodes = d3.range(numberOfNodes).map(function(i){ return {id: i}; });

	var links = [];

	d3.range(numberOfNodes).forEach(function(i){
	links.push({source: i, target: (i + 1) % numberOfNodes});
	links.push({source: i, target: i * 7 % numberOfNodes});
	});

	var link = svg
	.append("g")
	.attr("class", "links")
	.selectAll("line")
	.data(links)
	.enter()
	.append("line");

	simulation
	.nodes(nodes)
	.on("tick", ticked);

	simulation
	.force("link")
	.links(links);

	svg.append('rect')
	.attr("id", "base")
	.attr("width", "100%")
	.attr("height", "100%");

	svg.append("text")
	.attr("id", "title-outline")
	.attr("class", "title")
	.attr("x", "50%")
	.attr("y", "60%")
	.text(title)

	setInterval(moveNodes, 5000);

	function ticked() {
	link
	.attr("x1", function(d) { return d.source.x; })
	.attr("y1", function(d) { return d.source.y; })
	.attr("x2", function(d) { return d.target.x; })
	.attr("y2", function(d) { return d.target.y; });
	}

	function moveNodes() {
	nodes.forEach(function(d){
	d.vx = Math.random() * 2 - 2;
	d.vy = Math.random() * 2 - 2;
	})
	simulation.alphaTarget(0.1).restart();
	}

	</script>