Old school D3 from simpler times

All examples By author By category About

BrunoDumas

Full window Github gist

Motif

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Adapted from https://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/
	function basicRandomColor() {
    return colorFromRGB(randomRGB())
  }
    
  function componentToHex (rgb) { 
    var hex = Number(rgb).toString(16);
    if (hex.length < 2) {
         hex = "0" + hex;
    }
    return hex;
	}
    
  function randomRGB() {
    return {
      r: Math.round(Math.random() * 255),
      g: Math.round(Math.random() * 255),
      b: Math.round(Math.random() * 255)
    }
  }
    
  function colorFromRGB(rgb) {
    return '#' + componentToHex(rgb.r) + componentToHex(rgb.g) + componentToHex(rgb.b);
  }
    
  function randomColor() {
    var golden_ratio_conjugate = 0.618033988749895;
    var h = Math.random();

var hslToRgb = function (h, s, l){
        var r, g, b;

if(s == 0){
            r = g = b = l; // achromatic
        }else{
            function hue2rgb(p, q, t){
                if(t < 0) t += 1;
                if(t > 1) t -= 1;
                if(t < 1/6) return p + (q - p) * 6 * t;
                if(t < 1/2) return q;
                if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
                return p;
            }

var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
            var p = 2 * l - q;
            r = hue2rgb(p, q, h + 1/3);
            g = hue2rgb(p, q, h);
            b = hue2rgb(p, q, h - 1/3);
        }

return '#'+Math.round(r * 255).toString(16)+Math.round(g * 255).toString(16)+Math.round(b * 255).toString(16);
    };

return function(){
      h += golden_ratio_conjugate;
      h %= 1;
      return hslToRgb(h, 0.5, 0.60);
    };
  };

var svg = d3.select("body").append("svg")
      .attr("width", "100%") 
      .attr("height", "100%")
    var background = svg.append("rect")
    background
    	.attr("x", 0)
      .attr("y", 0)
    	.attr("width", "100%")
    	.attr("height", "100%")
    	.attr("fill", "white")
    
    var fillColor
    var bgColor
    var strokeColor
    
    var baseColor
    
    d3.xml('motif.svg')
    .then(data => {
        d3.select('svg').node().append(data.documentElement)
        var g = svg.select("svg g")
        
        var svgWidth = window.innerWidth
				var svgHeight = window.innerHeight
        
        var svgImage = svg.select("svg")
        svgImage
        	.attr("viewBox", "0 0 " + svgWidth + "px " + svgHeight + "px")
  				.attr("preserveAspectRatio", "xMinYMin meet")
        
        var paths = g.selectAll("path")
        var closedPaths = paths
            .filter(function(){
            	var lastChar = this.getAttribute("d").trim().slice(-1);
            	return (lastChar == "z" || lastChar == "Z")
          	})
        var openPaths = paths
            .filter(function(){
            	var lastChar = this.getAttribute("d").trim().slice(-1);
            	return (lastChar != "z" && lastChar != "Z")
          	})
        //var filteredPaths = g.selectAll("path#path5270-9")
        
        paths
        	.style("stroke-width", 2)
        
        function animationFunction(activatedPercent){
          if (typeof activatedPercent == 'undefined') {
            activatedPercent = 0.2
          }
          /*currentColor = basicRandomColor()
        	currentBgColor = basicRandomColor()
        	currentStrokeColor = basicRandomColor()*/
          
          baseColor = randomRGB()
          baseColorDarker = {
            r: baseColor.r - 25,
            g: baseColor.g - 25,
            b: baseColor.b - 25
          }
          baseColorLighter = {
            r: baseColor.r + 25,
            g: baseColor.g + 25,
            b: baseColor.b + 25
          }
          baseColorOpposite = {
            r: 255 - baseColor.r,
            g: 255 - baseColor.g,
            b: 255 - baseColor.b
          }
          
          fillColor = colorFromRGB(baseColorDarker)
          bgColor = colorFromRGB(baseColorOpposite)
          strokeColor = colorFromRGB(baseColorLighter)
          
          background
            .transition()
            .delay(1)
            .duration(4000)
          	.style("fill", bgColor)
          
					closedPaths.filter(function(){return Math.random() > 1.0 - activatedPercent})
            .transition()
            .delay(1)
            .duration(4000)
            .style("fill", fillColor)
            .style("stroke", strokeColor)
          
          openPaths.filter(function(){return Math.random() > 1.0 - activatedPercent})
          	.transition()
            .delay(1)
            .duration(4000)
            .style("stroke", strokeColor)
          
          
          // https://www.guidodiepen.nl/2018/07/wrapping-my-head-around-d3-rotation-transitions/
          /*paths
            .transition()
          	.delay(1)
            .duration(1000)
          	.attrTween("d", function(d, i, a){
            	var current_value = this.getAttribute("d")
              var edited_value = editPath(current_value, 0.5, 0.1)
							return d3.interpolateString( current_value, edited_value )
            })*/
            /*.each(function(){
              this.setAttribute("d", editPath(this.getAttribute("d"), 0.5, 0.1))
            })*/
          /*var randomPaths = paths.filter(function(){return Math.random() > 0.8})
          randomPaths
            .transition()
          	.delay(1)
            .duration(2000)
          	.attrTween("transform", function(){
            	var current_path = this.getAttribute("d")
							//var mean_position = getMeanCoordinates(current_path)
              var rotate_angle = 10
              var bbox = d3.select(this).node().getBBox()
              var interpol_rotate = d3.interpolateString( 
                "rotate (" + 0 + " " + (bbox.x + bbox.width / 2) + " " + (bbox.y + bbox.height / 2) + ")", 
              	"rotate (" + rotate_angle + " " + (bbox.x + bbox.width / 2) + " " + (bbox.y + bbox.height / 2) + ")")
              return interpol_rotate
            })
          	.transition()
          	.delay(1)
            .duration(2000)
          	.attrTween("transform", function(){
            	//var current_path = this.getAttribute("d")
							//var mean_position = getMeanCoordinates(current_path)
              var rotate_angle = 10
              var bbox = d3.select(this).node().getBBox()
              var interpol_rotate = d3.interpolateString( 
                "rotate (" + rotate_angle + " " + (bbox.x + bbox.width / 2) + " " + (bbox.y + bbox.height / 2) + ")", 
              	"rotate (" + 0 + " " + (bbox.x + bbox.width / 2) + " " + (bbox.y + bbox.height / 2) + ")")
              return interpol_rotate
            })*/
        }
				
      	animationFunction(1.0)
        var t = setInterval(animationFunction, 5000)
        
    		/*g.selectAll("path")
        	.filter(function(){return this.getAttribute("d").trim().slice(-1) == "z"})
          .style("fill", randomColor)
        	.transition()
        	.delay(1)
        	.duration(1000)
          .on("start", changeColor())*/
    })
    
    var numberRegex = /(-?[\d]+\.[\d]+)/g;
    var coordinateRegex = /(-?[\d]+\.?[\d]*)\s*(-?[\d]+\.?[\d]*)/g;

function editPath (pathD, maxVariation, editChance) {
      var outputPathD = pathD

while ((match = numberRegex.exec(pathD)) != null) {
        var matchLength = match[1].length
        var matchIndex = match.index
        var variationValue = 1 + Math.random() * maxVariation - maxVariation / 2

var originalFloatValue = parseFloat(match[1])
        var editedFloatValue = originalFloatValue + variationValue

var editedStringValue = editedFloatValue.toString().substring(0, matchLength)

if (Math.random() < editChance) {
        	outputPathD = outputPathD.substring(0, matchIndex) + editedStringValue + outputPathD.substring(matchIndex + matchLength)
        }
      }

return outputPathD
    }

</script>
</body>

https://d3js.org/d3.v5.min.js