Old school D3 from simpler times

All examples By author By category About

cemoulto

Full window Github gist

All Devices in SVG

<div class="container">
<svg version="1.1"
	 xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" xmlns:a="https://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
	 x="0px" y="0px" width="600px" height="600px" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve">
<defs>
  <clipPath id="monitorEdgeMask">
	<path class="monitorEdgeMask" fill="#494D5D" d="M559.7,79h-520C32.5,79,27,84.6,27,91.8V403h546V91.8C573,84.6,566.9,79,559.7,79z"/>    
  </clipPath>
	<clipPath id="laptopBaseMask">
<path class="laptopBaseMask" fill="#FFFAEB" d="M487,409v15.5c0,3.8-3.2,7.5-7,7.5H120c-3.8,0-7-3.7-7-7.5V409H487z"/>		
	</clipPath>		  	
	<clipPath id="monitorStandMask">
	<rect class="monitorStandMask" x="23" y="455" fill="#EA2877" width="550" height="102"/>
</clipPath>
<clipPath id="tabletContentGroupMask">
	<path class="tabletContentGroupMask" fill="#BDCCD4" d="M218.5,386.5v-203c0-2.8,2.3-5,5-5h153c2.8,0,5,2.3,5,5v203c0,2.8-2.3,5-5,5h-153
		C220.8,391.5,218.5,389.3,218.5,386.5z"/>  
  </clipPath>
</defs>

<g class="monitorGroup" opacity="1">
	<g class="monitorStandGroup" clip-path="url(#monitorStandMask)">
	<path class="monitorStand" fill="#FFFAEB" d="M386.3,512H374l-20.7-57h-106L226,512h-12.3c-2.6,0-4.7,1.9-4.7,4.5s2.1,4.5,4.7,4.5
		h172.7c2.6,0,4.7-1.9,4.7-4.5S388.9,512,386.3,512z"/>
		</g>
	<polygon class="monitorStandShadow" fill="#D9D7D3" points="357.4,467 242.6,467 247.1,455 353.1,455 	"/>
  <g class="monitorEdgeGroup" clip-path="url(#monitorEdgeMask)">
	<path class="monitorEdge" fill="#494D5D" d="M559.7,79h-520C32.5,79,27,84.6,27,91.8V403h546V91.8C573,84.6,566.9,79,559.7,79z"/>
	<path class="monitorScreen" fill="#BDCCD4" d="M544.5,383.3h-489c-3.8,0-7-3.1-7-7v-271c0-3.8,3.2-7,7-7h489c3.8,0,7,3.2,7,7v271
		C551.5,380.1,548.3,383.3,544.5,383.3z"/> 
<g class="monitorContentGroup" opacity="0.6">
	<path fill="#E5EBEE" d="M526.8,145H73.2c-3.2,0-5.7-2.6-5.7-5.7v-15.5c0-3.2,2.6-5.7,5.7-5.7h453.5c3.2,0,5.7,2.6,5.7,5.7v15.5
		C532.5,142.4,529.9,145,526.8,145z"/>
	<path fill="#8CA5B2" d="M157.9,364.5H73.1c-3.1,0-5.6-2.5-5.6-5.6v-58.7c0-3.1,2.5-5.6,5.6-5.6h84.7c3.1,0,5.6,2.5,5.6,5.6v58.7
		C163.5,362,161,364.5,157.9,364.5z"/>
	<path fill="#8CA5B2" d="M526.9,272.5H73.1c-3.1,0-5.6-2.5-5.6-5.6v-93.7c0-3.1,2.5-5.6,5.6-5.6h453.7c3.1,0,5.6,2.5,5.6,5.6v93.7
		C532.5,270,530,272.5,526.9,272.5z"/>
	<path fill="#E5EBEE" d="M530.5,306H190.2c-1.1,0-2-0.9-2-2v-7.5c0-1.1,0.9-2,2-2h340.3c1.1,0,2,0.9,2,2v7.5
		C532.5,305.1,531.6,306,530.5,306z"/>
	<path fill="#E5EBEE" d="M530.5,334.3H190.2c-1.1,0-2-0.9-2-2v-7.5c0-1.1,0.9-2,2-2h340.3c1.1,0,2,0.9,2,2v7.5
		C532.5,333.4,531.6,334.3,530.5,334.3z"/>
	<path fill="#E5EBEE" d="M530.5,364.5H190.2c-1.1,0-2-0.9-2-2V355c0-1.1,0.9-2,2-2h340.3c1.1,0,2,0.9,2,2v7.5
		C532.5,363.6,531.6,364.5,530.5,364.5z"/>	
</g>			
  </g>
	<path class="monitorBottom" fill="#FFFAEB" d="M573,403v39c0,7.1-6.1,13-13.3,13h-520c-7.2,0-12.7-5.9-12.7-13v-39H573z"/>

<circle class="monitorLogo" fill="#A4ACBB" cx="300" cy="426" r="10"/>

</g>
<g class="laptopGroup" opacity="1">
	
<path class="laptopEdgeLeft" fill="#FFFAEB" d="M310,401.5H131.5v-226c0-3.9,3.2-7,7-7H310"/>
<path class="laptopEdgeRight" fill="#FFFAEB" d="M290,168.5h171.5c3.8,0,7,3.1,7,7v226H290"/>
	<g class="laptopBaseGroup" clip-path="url(#laptopBaseMask)">
	<path class="laptopBase" fill="#FFFAEB" d="M487,409v15.5c0,3.8-3.2,7.5-7,7.5H120c-3.8,0-7-3.7-7-7.5V409H487z"/>
	</g>
	<polygon class="laptopTrackpad" fill="#A4ACBB" points="326.7,421.8 273.3,421.8 268.3,414.2 331.7,414.2 	"/>
<path class="laptopScreen" fill="#BDCCD4" d="M452.7,391.9H147.3c-3.8,0-7-3.1-7-7V185.6c0-3.8,3.2-7,7-7h305.3c3.9,0,7,3.2,7,7
	v199.3C459.7,388.8,456.5,391.9,452.7,391.9z"/>
<g class="laptopContentGroup" opacity="0.6">
	<path fill="#E5EBEE" d="M437.8,212.3H164.1c-1.9,0-3.5-1.6-3.5-3.5v-9.4c0-1.9,1.6-3.5,3.5-3.5h273.7c1.9,0,3.5,1.6,3.5,3.5v9.4
		C441.2,210.7,439.7,212.3,437.8,212.3z"/>
	<path fill="#8CA5B2" d="M215.1,363.8H164c-1.9,0-3.4-1.5-3.4-3.4V325c0-1.9,1.5-3.4,3.4-3.4h51.1c1.9,0,3.4,1.5,3.4,3.4v35.4
		C218.5,362.3,217,363.8,215.1,363.8z"/>
	<path fill="#8CA5B2" d="M437.8,307.3H164c-1.9,0-3.4-1.5-3.4-3.4v-74.6c0-1.9,1.5-3.4,3.4-3.4h273.8c1.9,0,3.4,1.5,3.4,3.4v74.6
		C441.2,305.8,439.7,307.3,437.8,307.3z"/>
	<path fill="#E5EBEE" d="M440,328.5H234.6c-0.7,0-1.2-0.5-1.2-1.2v-4.5c0-0.7,0.5-1.2,1.2-1.2H440c0.7,0,1.2,0.5,1.2,1.2v4.5
		C441.2,327.9,440.7,328.5,440,328.5z"/>
	<path fill="#E5EBEE" d="M440,345.5H234.6c-0.7,0-1.2-0.5-1.2-1.2v-4.5c0-0.7,0.5-1.2,1.2-1.2H440c0.7,0,1.2,0.5,1.2,1.2v4.5
		C441.2,345,440.7,345.5,440,345.5z"/>
	<path fill="#E5EBEE" d="M440,363.8H234.6c-0.7,0-1.2-0.5-1.2-1.2v-4.5c0-0.7,0.5-1.2,1.2-1.2H440c0.7,0,1.2,0.5,1.2,1.2v4.5
		C441.2,363.3,440.7,363.8,440,363.8z"/>  
</g>
</g>

<g class="phoneGroup" opacity="0">
	<path class="phoneEdge" fill="#FFFAEB" d="M255.2,371.4V198.6c0-3.2,2.7-5.9,5.9-5.9h77.9c3.2,0,5.9,2.7,5.9,5.9v172.9
		c0,3.2-2.7,5.9-5.9,5.9h-77.9C257.8,377.3,255.2,374.7,255.2,371.4z"/>
	<circle class="phoneButton" fill="#9AA3B2" cx="300" cy="363.1" r="6"/>
	<circle class="phoneCamera" fill="#A4ACBB" cx="284.3" cy="203.6" r="1.5"/>
	<rect class="phoneScreen" x="262.1" y="214.3" fill="#BDCCD4" width="75.7" height="135.3"/>
	
		<line class="phoneSpeaker" fill="none" stroke="#9AA3B2" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="292.5" y1="203" x2="307.5" y2="203"/>
  
<g class="phoneContentGroup" opacity="0.6">
	<path fill="#E5EBEE" d="M327.8,235.6h-55.3c-1,0-1.9-0.9-1.9-1.9v-7.3c0-1,0.9-1.9,1.9-1.9h55.3c1,0,1.9,0.9,1.9,1.9v7.3
		C329.7,234.8,328.8,235.6,327.8,235.6z"/>
	<path fill="#8CA5B2" d="M294.3,338.7h-21.9c-1,0-1.9-0.8-1.9-1.9v-25c0-1,0.8-1.9,1.9-1.9h21.9c1,0,1.9,0.8,1.9,1.9v25
		C296.2,337.8,295.3,338.7,294.3,338.7z"/>
	<path fill="#8CA5B2" d="M327.8,300.3h-55.4c-1,0-1.9-0.8-1.9-1.9v-51.7c0-1,0.8-1.9,1.9-1.9h55.4c1,0,1.9,0.8,1.9,1.9v51.7
		C329.7,299.4,328.8,300.3,327.8,300.3z"/>
	<path fill="#E5EBEE" d="M329,314.7h-25.6c-0.4,0-0.7-0.3-0.7-0.7v-3.4c0-0.4,0.3-0.7,0.7-0.7H329c0.4,0,0.7,0.3,0.7,0.7v3.4
		C329.7,314.4,329.4,314.7,329,314.7z"/>
	<path fill="#E5EBEE" d="M329,338.7h-25.6c-0.4,0-0.7-0.3-0.7-0.7v-3.4c0-0.4,0.3-0.7,0.7-0.7H329c0.4,0,0.7,0.3,0.7,0.7v3.4
		C329.7,338.4,329.4,338.7,329,338.7z"/>
	<path fill="#E5EBEE" d="M329,326.3h-25.6c-0.4,0-0.7-0.3-0.7-0.7v-3.4c0-0.4,0.3-0.7,0.7-0.7H329c0.4,0,0.7,0.3,0.7,0.7v3.4
		C329.7,326,329.4,326.3,329,326.3z"/>
</g>  
</g>
  
<g class="tabletGroup" opacity="1">
	<path class="tabletEdge" fill="#FFFAEB" d="M198.5,404.5v-239c0-7.7,6.3-14,14-14h175c7.7,0,14,6.3,14,14v239c0,7.7-6.3,14-14,14
		h-175C204.8,418.5,198.5,412.2,198.5,404.5z"/>
	<path class="tabletScreen" fill="#BDCCD4" d="M218.5,386.5v-203c0-2.8,2.3-5,5-5h153c2.8,0,5,2.3,5,5v203c0,2.8-2.3,5-5,5h-153
		C220.8,391.5,218.5,389.3,218.5,386.5z"/>
	<circle class="tabletButton" fill="#A4ACBB" cx="300" cy="406" r="6"/>
	<circle class="tabletCamera" fill="#A4ACBB" cx="300" cy="168" r="2"/>
  <g class="maskedTabletContentGroup" clip-path="url(#tabletContentGroupMask)">
    <g class="tabletContentGroup" opacity="0.6" >
      <path fill="#E5EBEE" d="M363.6,217.4H236.9c-1.9,0-3.5-1.6-3.5-3.5v-9.4c0-1.9,1.6-3.5,3.5-3.5h126.7c1.9,0,3.5,1.6,3.5,3.5v9.4
        C367,215.8,365.5,217.4,363.6,217.4z"/>
      <path fill="#8CA5B2" d="M288,368.9h-51.1c-1.9,0-3.4-1.5-3.4-3.4v-35.4c0-1.9,1.5-3.4,3.4-3.4H288c1.9,0,3.4,1.5,3.4,3.4v35.4
        C291.4,367.4,289.8,368.9,288,368.9z"/>
      <path fill="#8CA5B2" d="M363.6,312.4H236.8c-1.9,0-3.4-1.5-3.4-3.4v-74.6c0-1.9,1.5-3.4,3.4-3.4h126.8c1.9,0,3.4,1.5,3.4,3.4V309
        C367,310.9,365.5,312.4,363.6,312.4z"/>
      <path fill="#E5EBEE" d="M365.8,333.6h-58.4c-0.7,0-1.2-0.5-1.2-1.2v-4.5c0-0.7,0.5-1.2,1.2-1.2h58.4c0.7,0,1.2,0.5,1.2,1.2v4.5
        C367,333.1,366.5,333.6,365.8,333.6z"/>
      <path fill="#E5EBEE" d="M365.8,368.9h-58.4c-0.7,0-1.2-0.5-1.2-1.2v-4.5c0-0.7,0.5-1.2,1.2-1.2h58.4c0.7,0,1.2,0.5,1.2,1.2v4.5
        C367,368.4,366.5,368.9,365.8,368.9z"/>
      <path fill="#E5EBEE" d="M365.8,350.6h-58.4c-0.7,0-1.2-0.5-1.2-1.2v-4.5c0-0.7,0.5-1.2,1.2-1.2h58.4c0.7,0,1.2,0.5,1.2,1.2v4.5
        C367,350.1,366.5,350.6,365.8,350.6z"/>
    </g>  
  </g>
  </g>
	</svg>

</div>