D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
Orkish
Full window
Github gist
Marriott hotels
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"> <path fill: none;></path> <g transform="translate(0, 150)"> <!-- hotel sign --> <g> <rect style="stroke: black; stroke-width: 4; fill: none" width="240" height="90" x="20" y="-100"></rect> <text x="40" y="-50" font-family="Verdana" font-size="35" fill="steelblue">Marriott</text> <text x="40" y="-20" font-family="Verdana" font-size="20" fill="steelblue">Hotel & resorts</text> <line x1="90" y1="-10" x2="90" y2="0" stroke-width="5" stroke="black"/> <line x1="190" y1="-10" x2="190" y2="0" stroke-width="5" stroke="black"/> </g> <!-- outer apt --> <rect style="stroke: black; stroke-width: 4; fill: #FFE761" width="490" height="300" x="5" y="0"></rect> <rect style="stroke: steelblue; stroke-width: 4; fill: white;" width="40" height="50" x="20" y="20"></rect> <rect style="stroke: steelblue; stroke-width: 4; fill: white" width="40" height="50" x="80" y="20"></rect> <rect style="stroke: steelblue; stroke-width: 4; fill: white" width="40" height="50" x="140" y="20"></rect> <rect style="stroke: steelblue; stroke-width: 4; fill: white" width="40" height="50" x="200" y="20"></rect> <rect style="stroke: steelblue; stroke-width: 4; fill: white" width="40" height="50" x="260" y="20"></rect> <rect style="stroke: steelblue; stroke-width: 4; fill: white" width="40" height="50" x="320" y="20"></rect> <rect style="stroke: steelblue; stroke-width: 4; fill: white" width="40" height="50" x="380" y="20"></rect> <rect style="stroke: steelblue; stroke-width: 4; fill: white" width="40" height="50" x="440" y="20"></rect> <rect style="stroke: steelblue; stroke-width: 4; fill: white" width="40" height="50" x="20" y="80"></rect> <rect style="stroke: steelblue; stroke-width: 4; fill: white" width="40" height="50" x="80" y="80"></rect> <rect style="stroke: steelblue; stroke-width: 4; fill: white" width="40" height="50" x="140" y="80"></rect> <rect style="stroke: steelblue; stroke-width: 4; fill: white" width="40" height="50" x="200" y="80"></rect> <rect style="stroke: steelblue; stroke-width: 4; fill: white" width="40" height="50" x="260" y="80"></rect> <rect style="stroke: steelblue; stroke-width: 4; fill: white" width="40" height="50" x="320" y="80"></rect> <rect style="stroke: steelblue; stroke-width: 4; fill: white" width="40" height="50" x="380" y="80"></rect> <rect style="stroke: steelblue; stroke-width: 4; fill: white" width="40" height="50" x="440" y="80"></rect> <rect style="stroke: steelblue; stroke-width: 4; fill: white" width="40" height="50" x="20" y="140"></rect> <rect style="stroke: steelblue; stroke-width: 4; fill: white" width="40" height="50" x="80" y="140"></rect> <rect style="stroke: steelblue; stroke-width: 4; fill: white" width="40" height="50" x="140" y="140"></rect> <rect style="stroke: steelblue; stroke-width: 4; fill: white" width="40" height="50" x="200" y="140"></rect> <rect style="stroke: steelblue; stroke-width: 4; fill: white" width="40" height="50" x="260" y="140"></rect> <rect style="stroke: steelblue; stroke-width: 4; fill: white" width="40" height="50" x="320" y="140"></rect> <rect style="stroke: steelblue; stroke-width: 4; fill: white" width="40" height="50" x="380" y="140"></rect> <rect style="stroke: steelblue; stroke-width: 4; fill: white" width="40" height="50" x="440" y="140"></rect> <rect style="stroke: steelblue; stroke-width: 4; fill: white" width="40" height="50" x="20" y="200"></rect> <rect style="stroke: steelblue; stroke-width: 4; fill: white" width="40" height="50" x="80" y="200"></rect> <rect style="stroke: steelblue; stroke-width: 4; fill: white" width="40" height="50" x="140" y="200"></rect> <rect style="stroke: black; stroke-width: 4; fill: brown" width="50" height="90" x="200" y="210"></rect> <rect style="stroke: black; stroke-width: 4; fill: brown" width="50" height="90" x="250" y="210"></rect> <circle r="5" transform="translate(240, 255)" style="fill:black"></circle> <circle r="5" transform="translate(260, 255)" style="fill:black"></circle> <rect style="stroke: steelblue; stroke-width: 4; fill: white" width="40" height="50" x="320" y="200"></rect> <rect style="stroke: steelblue; stroke-width: 4; fill: white" width="40" height="50" x="380" y="200"></rect> <rect style="stroke: steelblue; stroke-width: 4; fill: white" width="40" height="50" x="440" y="200"></rect> <rect style="fill:green; stroke-width: 4;" width="580" height="80" y="302"></rect> <!--?xml version="1.0" standalone="no"?--> <svg version="1.0" xmlns="https://www.w3.org/2000/svg" width="300pt" height="40pt" viewBox="0 -150 900 400" preserveAspectRatio="xMidYMid meet"y="15"> <g transform="translate(0,300) scale(0.100000,-0.100000)" fill="#050505" stroke="none"> <path d="M809 2797 c-192 -54 -305 -251 -255 -444 19 -78 50 -126 114 -185 157 -141 416 -110 535 64 164 238 10 557 -276 574 -42 2 -91 -1 -118 -9z" id="node1" class="node"></path> <path d="M1375 2334 c-80 -43 -115 -101 -115 -186 1 -70 27 -126 81 -169 24 -19 56 -47 71 -63 43 -44 34 -24 -33 80 -53 81 -61 101 -62 143 -1 61 26 109 79 138 47 27 107 29 149 4 67 -39 186 -237 224 -372 68 -245 -40 -438 -289 -514 -76 -23 -235 -36 -283 -24 -22 6 -54 26 -76 49 l-37 38 -75 -13 c-128 -23 -191 -61 -234 -145 -8 -15 -23 -72 -35 -126 -17 -81 -22 -151 -27 -384 -3 -157 -3 -321 2 -365 7 -74 10 -82 45 -117 35 -35 42 -38 93 -38 48 0 61 4 90 30 45 39 57 86 57 226 0 210 34 571 55 592 26 26 529 23 665 -4 118 -24 208 -2 287 69 55 50 82 110 94 214 13 104 -1 257 -32 361 -66 217 -232 418 -445 537 -78 43 -97 50 -154 52 -46 2 -74 -2 -95 -13z" id="node2" class="node"></path> <path d="M1425 2266 c-50 -22 -77 -60 -82 -113 -4 -44 -1 -54 40 -114 71 -106 117 -212 117 -269 0 -65 -74 -102 -230 -116 -41 -4 -87 -13 -102 -21 -37 -18 -58 -62 -58 -118 0 -38 6 -51 34 -83 l35 -37 103 1 c228 2 403 94 457 240 30 79 29 198 -3 290 -30 88 -56 140 -119 237 -39 58 -61 82 -92 97 -48 23 -59 24 -100 6z" id="node3" class="node"></path> <path d="M622 2025 c-11 -23 -7 -28 86 -99 l97 -75 14 27 c7 15 15 29 17 31 2 2 18 -6 36 -17 56 -33 186 -102 193 -102 4 0 -45 41 -109 90 -64 50 -119 90 -122 90 -3 0 -16 -12 -29 -27 l-24 -28 -68 68 c-38 37 -71 67 -74 67 -3 0 -11 -11 -17 -25z" id="node4" class="node"></path> <path d="M2340 1641 c0 -203 -3 -376 -6 -385 -5 -13 -22 -16 -79 -16 -93 0 -105 -11 -105 -103 l0 -67 -506 0 c-329 0 -512 -4 -525 -10 -22 -13 -25 -61 -7 -122 14 -48 85 -122 132 -139 41 -15 39 -6 66 -362 11 -150 23 -254 31 -263 10 -12 83 -14 460 -14 394 0 449 2 463 16 9 8 16 23 16 33 0 10 27 125 60 256 41 166 65 244 80 259 20 22 20 31 20 654 l0 632 -50 0 -50 0 0 -369z" id="node5" class="node"></path> <path d="M692 1749 c-20 -34 -25 -34 -88 -13 -48 16 -60 13 -66 -21 -2 -15 5 -21 37 -27 22 -4 64 -7 93 -7 46 -1 52 1 52 19 0 23 6 24 102 9 63 -10 72 -9 80 6 8 14 21 16 86 10 l77 -6 -50 21 c-98 40 -113 41 -135 13 -18 -23 -23 -24 -47 -14 -16 6 -50 17 -76 25 l-49 15 -16 -30z" id="node6" class="node"></path> <path d="M898 1632 c-74 -14 -78 -16 -78 -43 0 -23 -5 -28 -32 -32 -18 -3 -70 -13 -116 -23 -76 -16 -82 -19 -76 -38 4 -12 7 -22 8 -23 1 -2 217 54 238 62 12 5 16 14 12 29 -5 20 4 25 88 53 103 35 84 41 -44 15z" id="node7" class="node"></path> </g> <g transform="translate(0.000000,300.000000) scale(0.100000,-0.100000)" fill="#A1A1A1" stroke="none"> </g> </svg> </g> </svg> </body>
https://d3js.org/d3.v4.min.js