D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
wenzelmkay
Full window
Github gist
Bahahamamamamas
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <style> body { margin:30;position:fixed;top:0;right:0;bottom:0;left:0; } svg { width:100%; height: 100% } </style> </head> <body> <script> var svg = d3.select("body").append("svg") svg.append("rect") .attr({x:0, y:0, width: 300, height: 150}) .style({fill: "00abc9"}) svg.append("rect") .attr({x:0, y:50, width: 300, height: 50}) .style({fill: "fae042"}) svg.append("path") .attr ('d', function(d) { var x=0, y=0; return 'M'+ x +' '+ y + 'L 0 150 L 129.904 75 z'; }) .style({fill:"black"}) var text = svgContainer.selectAll("text") </script> </body> <script> // <text> text-anchor="end" alignment-baseline="central" x="290" y="25" font-size="30" fill="gray" font-family="Verdana">WELCOME<tspan x="290" y="75" text-anchor="end" alignment-baseline="central">TO THE</tspan><tspan x="290" y="125" text-anchor="end" alignment-baseline="central" y=200>BAHAMAS!</tspan> // </text>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js