Old school D3 from simpler times

All examples By author By category About

lucyycao

Full window Github gist

Lucy's House

Built with blockbuilder.org

forked from anonymous's block: fresh block

forked from anonymous's block: Lucy's House

<svg width="1000" height=1000">
  
  <g transform="translate(30,380) scale(0.15)">
    <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: #f1c40f"></circle>
      <circle r="60" transform="rotate(144) translate(40, 0) scale(1.5, 1)" style="fill: #f1c40f"></circle>
      <circle r="60" transform="rotate(216) translate(40, 0) scale(1.5, 1)" style="fill: #f1c40f"></circle>
      <circle r="60"  transform="rotate(288) translate(40, 0) scale(1.5, 1)" style="fill: #f1c40f"></circle>
      <circle r="60" style="fill: #f39c12"></circle>
    </g>
  </g>
  
  
  <g transform="translate(100,150)">
    <rect x="0" y="0" width="300" height="300" style="fill:#b7b7b7" ></rect>
  </g>
  
    
  <g transform="translate(100,150)">
  <path d="M0 0 Q 150 -250 300 0" stroke="#562393" style="fill: #562393"/>
  </g>
  
  
  <g transform="translate(120,180)scale(0.5)">
  <rect x="0" y="0" width="80" height="80" style="fill:transparent; stroke: steelblue; stroke-width: 6 "></rect>
  <rect x="0" y="90" width="80" height="80" style="fill:transparent;stroke: steelblue; stroke-width: 6" ></rect>
    <rect x="90" y="0" width="80" height="80" style="fill:transparent;stroke: steelblue; stroke-width: 6" ></rect>
    <rect x="90" y="90" width="80" height="80" style="fill:transparent;stroke: steelblue; stroke-width: 6" ></rect>
  </g>
  
  <g transform="translate(295,180)scale(0.5)">
  <rect x="0" y="0" width="80" height="80" style="fill:transparent; stroke: steelblue; stroke-width: 6 "></rect>
  <rect x="0" y="90" width="80" height="80" style="fill:transparent;stroke: steelblue; stroke-width: 6" ></rect>
    <rect x="90" y="0" width="80" height="80" style="fill:transparent;stroke: steelblue; stroke-width: 6" ></rect>
    <rect x="90" y="90" width="80" height="80" style="fill:transparent;stroke: steelblue; stroke-width: 6" ></rect>
  </g>
  
   
  <g transform = "translate(250,370)">
    <circle r=80 style="fill: #f2df11"></circle>
    <circle r=60 style="fill: #f23311"></circle>
  </g> 
    
</svg>