D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
lilian-li
Full window
Github gist
test
Built with
blockbuilder.org
<!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; } </style> </head> <body> <svg width="500" height="550"> <rect style="fill: white; stroke: steelblue; stroke-width: 6" width="400" height="200" x="100" y="300"></rect> <path d="M 100 200 q 150 -150 300 0" stroke="steelblue" stroke-width="5" fill="none" /> <rect style="fill: white; stroke: steelblue; stroke-width: 6" width="300" height="300" x="100" y="200"></rect> <rect style="fill: white; stroke: steelblue; stroke-width: 6" width="300" height="100" x="100" y="200"></rect> <rect style="fill: white; stroke: steelblue; stroke-width: 6" width="300" height="100" x="100" y="300"></rect> <rect style="fill: white; stroke: steelblue; stroke-width: 6" width="100" height="300" x="200" y="200"></rect> <rect style="fill: white; stroke: steelblue; stroke-width: 6" width="100" height="100" x="200" y="300"></rect> <rect style="fill: white; stroke: steelblue; stroke-width: 6" width="60" height="80" x="220" y="420"></rect> <g transform="translate(-100,0) scale(0.)" width="500" height="550"> <g transform="translate(250,137.5)"> <path d="M0,0 L-40,200 L20,600" style="stroke: #2ecc71; stroke-width: 20px; fill: none;"> </path> <g class="flower"> <circle r="60" transform="rotate(0) translate(40, 0) scale(1.5, 1)" style="fill: #f1c40f"></circle> <circle r="60" transform="rotate(72) translate(40, 0) scale(1.5, 1)" style="fill: #f0610e"></circle> <circle r="60" transform="rotate(144) translate(40, 0) scale(1.5, 1)" style="fill: #f02c0e"></circle> <circle r="60" transform="rotate(216) translate(40, 0) scale(1.5, 1)" style="fill: #f00e19"></circle> <circle r="60" transform="rotate(288) translate(40, 0) scale(1.5, 1)" style="fill: #f00e5d"></circle> <circle r="60" style="fill: #f39c12"></circle> </g> </g> </g> </svg> </body>
https://d3js.org/d3.v4.min.js