Old school D3 from simpler times

All examples By author By category About

gokatz

Full window Github gist

Bot Notification

Built with blockbuilder

<!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; }
    #rootSVG {
      border: 3px solid #ddd;
    }
    #svgContainer {
     	margin-left: 25%;
      margin-top: 10%;
    }
    @keyframes blinker {
      50% { opacity: 0; }
    }
  </style>
</head>

<body>
  <div id="svgContainer">
    <svg id="rootSVG" xmlns="https://www.w3.org/2000/svg" height="300" width="500" viewBox="0 0 3000 1754">
      <g id="roboGroup">
    <path d="M345.027 110.175h-93.932c-4.806 0-8.7 3.895-8.7 8.7s3.894 8.7 8.7 8.7h85.233v83.475c0 44.293-36.034 80.327-80.327 80.327s-80.327-36.034-80.327-80.327v-83.475h33.43c4.806 0 8.7-3.895 8.7-8.7s-3.894-8.7-8.7-8.7h-42.13a8.7 8.7 0 0 0-8.7 8.7v92.175c0 53.887 43.839 97.727 97.727 97.727 53.887 0 97.727-43.839 97.727-97.727v-92.175a8.7 8.7 0 0 0-8.701-8.7z" />
    <path id="roboEye" d="M324.549 175.722c-3.639-17.855-17.355-29.393-34.945-29.393-10.545 0-22.062 4.138-33.604 12.024-11.542-7.887-23.058-12.024-33.603-12.024-17.587 0-31.302 11.537-34.94 29.392-2.979 14.62 1.015 31.029 11.247 46.203 11.428 16.945 30.063 31.257 53.892 41.39a8.708 8.708 0 0 0 6.808 0c23.831-10.132 42.467-24.445 53.895-41.39 10.234-15.173 14.23-31.582 11.25-46.202zm-68.548 70.085c-47.01-21.289-54.331-52.693-51.495-66.612 2.003-9.829 8.525-15.467 17.891-15.467 5.752 0 15.32 2.126 28.233 12.254a8.7 8.7 0 0 0 10.738 0c12.915-10.128 22.482-12.254 28.236-12.254 9.37 0 15.893 5.637 17.896 15.468 2.836 13.919-4.486 45.321-51.499 66.611z" />
    <circle cx="329.568" cy="86.649" r="9.023" />
    <circle cx="294.769" cy="86.649" r="9.023" />
    <path d="M421.815 133.813a68.496 68.496 0 0 0-34.832-21.517C377.215 48.788 322.199 0 256 0c-29.832 0-58.004 9.682-81.472 28a8.7 8.7 0 0 0 10.706 13.715c20.382-15.908 44.852-24.316 70.768-24.316 59.456 0 108.527 45.305 114.51 103.204.096.935.19 1.96.266 2.932 2.478 31.845.349 64.571.349 96.505v4.66c0 47.729-31.235 92.146-76.157 108.332-2.192.79-4.409 1.51-6.647 2.16-18.282 5.307-37.804 6.045-56.431 2.086-44.726-9.491-80.938-47.273-89.171-92.143a113.407 113.407 0 0 1-1.847-20.435v-92.175c0-3.393.201-6.767.455-10.148 1.801-20.724 9.102-40.382 21.414-57.357a8.7 8.7 0 0 0-1.935-12.151c-3.889-2.82-9.331-1.956-12.151 1.935-12.474 17.2-20.485 36.785-23.646 57.492a68.526 68.526 0 0 0-34.827 21.516 68.416 68.416 0 0 0-16.7 44.8 68.416 68.416 0 0 0 16.7 44.8 68.504 68.504 0 0 0 34.831 21.517c7.511 48.83 41.775 88.948 87.3 104.889v24.067a130.163 130.163 0 0 0-21.91 5.359 130.501 130.501 0 0 0-24.628 11.363c-39.606 23.515-64.208 66.698-64.208 112.692a8.7 8.7 0 0 0 8.7 8.7H401.73a8.7 8.7 0 0 0 8.7-8.7c0-45.996-24.603-89.177-64.208-112.692-.044-.027-.093-.044-.137-.07-.036-.021-.067-.046-.103-.066a130.66 130.66 0 0 0-23.211-10.812 130.119 130.119 0 0 0-23.088-5.774v-24.068c45.527-15.94 79.79-56.058 87.301-104.888a68.516 68.516 0 0 0 34.832-21.517c10.769-12.428 16.7-28.338 16.7-44.8s-5.932-32.371-16.701-44.799zm-298.331 92.388c-19.169-7.496-32.599-26.346-32.599-47.588s13.429-40.093 32.599-47.589a125.3 125.3 0 0 0-.009 1.501v92.176c0 .499.003 1 .009 1.5zm38.036 268.4h-42.212c2.436-31.26 17.888-60.318 42.212-79.906v79.906zm188.961-79.908c24.324 19.588 39.776 48.646 42.212 79.907h-42.212v-79.907zm-33.463-18.613a112.724 112.724 0 0 1 16.064 7.087V494.6H178.92v-91.44a112.703 112.703 0 0 1 16.023-7.073l1.108-.385c8.265-2.804 16.938-4.644 25.778-5.473a8.7 8.7 0 0 0 7.889-8.661v-26.959c.009.158 2.792.528 3.036.572a132.902 132.902 0 0 0 42.457.647c2.367-.346 4.73-.747 7.076-1.219v26.957a8.699 8.699 0 0 0 7.887 8.661 113.403 113.403 0 0 1 26.844 5.853zm71.498-169.878c.115-10.176.009-20.361.009-30.537v-48.519c0-1.336.01-16.123-.009-16.123 19.169 7.495 32.599 26.346 32.599 47.59s-13.429 40.094-32.599 47.589z" />
		</g>

</svg>
    </div>
  <script>
		let roboGroup = d3.select("#roboGroup");
    roboGroup.attr("transform", "translate(2585,400) rotate(-40)")
    
    let roboEye = d3.select("#roboEye")
    .attr("fill", "pink")
    .attr("stroke", "pink")
    .style("animation", "blinker 1s linear infinite");

setTimeout(() => {
      roboEye.style("animation", "none");
    }, 3000);
    
    setTimeout(() => {
       let rgTrans = roboGroup.transition();
      rgTrans.attr("transform", "translate(1300,400) rotate(0)").duration(1000);
    }, 4000);
    
    let svg = d3.select("svg");
    setTimeout(() => {
      let msgBox = svg.append("rect")
       .attr("id", "textBox")
       .attr("x", 700)
       .attr("y", 910)
       .attr("height", 450)
       .attr("width", 0)
	      .attr("fill", "none")
     .attr("stroke", "#333")
      .attr("stroke-width", 10)
      
      let textBoxTransition = d3.select("#textBox").transition();
			textBoxTransition.attr("width", 1600).duration(500)
			textBoxTransition.attr("x", 700).duration(500)  
    }, 5000);

setTimeout(() => {
      let textBox = svg.append("text")
      .attr("id", "textMsg")
      .attr("y", 1000)
      .attr("x", 730)
      .attr("font-size", 80)
      .attr("font-family", "monospace")
      .attr("fill", "pink");
      
      let messages = ["Hey, Gokul Kathirvel! Here we", "introduce new roles option for", "block builder. Enjoy and let us","know your feedback"];
      let msg = d3.select("#textMsg")
      .selectAll("tspan")
      .data(messages)
      .enter()
      .append("tspan")
			.text((d) => {return d})
     	.attr("y", (d, i) => {
         return 1000 + (i*100)
      	})
     	.attr("x", "730")
      .style("opacity",0)
      .transition()
      .duration(1500)
      .style("opacity",1);
      
    }, 5500);      
  </script>
</body>

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