Skip to content

Instantly share code, notes, and snippets.

/All Devices in SVG.markdown

Created May 6, 2016 03:52
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/4caee40db5164209aa275cd3e6976468 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/4caee40db5164209aa275cd3e6976468 to your computer and use it in GitHub Desktop.
Download ZIP
All Devices in SVG
Raw
All Devices in SVG.markdown
Raw
index.html
<div class="container">
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://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="laptopEdge" fill="#FFFAEB" d="M468.5,175.5v226h-337v-226c0-3.9,3.2-7,7-7h323C465.3,168.5,468.5,171.6,468.5,175.5z"
/-->
<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>
Raw
script.js
var xmlns="http://www.w3.org/2000/svg", select = function(s) {
return document.querySelector(s);
}, selectAll = function(s) {
return document.querySelectorAll(s);
}, container = select('.container'),
monitorContent = selectAll('.monitorContentGroup path'),
monitorGroup = select('.monitorGroup'),
monitorScreen = select('.monitorScreen'),
monitorLogo = select('.monitorLogo'),
monitorStand = select('.monitorStand'),
monitorStandShadow = select('.monitorStandShadow'),
monitorBottom = select('.monitorBottom'), monitorEdge = select('.monitorEdge'),
laptopContent = selectAll('.laptopContentGroup path'),
laptopContentGroup = select('.laptopContentGroup'),
laptopGroup = select('.laptopGroup'), laptopScreen = select('.laptopScreen'), laptopEdgeLeft = select('.laptopEdgeLeft'), laptopEdgeRight = select('.laptopEdgeRight'), laptopTrackpad = select('.laptopTrackpad'), laptopBase = select('.laptopBase'),
tabletContent = selectAll('.tabletContentGroup path'),
tabletContentGroup = select('.tabletContentGroup'), tabletGroup = select('.tabletGroup'), tabletButton = select('.tabletButton'), tabletCamera = select('.tabletCamera'), tabletScreen = select('.tabletScreen'),
phoneGroup = select('.phoneGroup'),phoneButton = select('.phoneButton'),phoneCamera = select('.phoneCamera'),phoneSpeaker = select('.phoneSpeaker')
//center the container cos it's pretty an' that
TweenMax.set(container, {
position:'absolute',
top:'50%',
left:'50%',
xPercent:-50,
yPercent:-50
})
TweenMax.set([ monitorBottom], {
transformOrigin:'50% 100%'
})
TweenMax.set([monitorStand, laptopBase,tabletScreen], {
transformOrigin:'50% 0%'
})
TweenMax.set([monitorLogo,monitorScreen, laptopScreen, laptopTrackpad, tabletGroup, laptopGroup, tabletButton, tabletCamera, tabletContentGroup,phoneButton, phoneCamera,phoneSpeaker, laptopContentGroup,phoneGroup], {
transformOrigin:'50% 50%'
})
TweenMax.set([ laptopEdgeLeft,laptopEdgeRight ], {
transformOrigin:'0% 100%'
})
TweenMax.set(tabletGroup, {
rotation:-90
})
var tl = new TimelineMax({repeat:-1, delay:1, yoyo:false,paused:false});
tl.timeScale(3)
tl.from(monitorBottom,1, {
scaleY:0,
ease:Power1.easeOut
})
.from(monitorStand, 1, {
y:-70,
ease:Power1.easeOut
}, '-=1')
.from(monitorStandShadow, 0.5, {
alpha:0,
ease:Power1.easeIn
},'-=0.5')
.from(monitorEdge, 1, {
y:330
},'-=0.25')
.from(monitorScreen, 2, {
y:330,
ease:Power1.easeOut
},'-=1')
.staggerFrom(monitorContent, 1, {
scaleX:0
},0.1,'-=0.51')
.from(monitorLogo, 1, {
scale:0,
ease:Back.easeOut.config(2)
})
.staggerTo(monitorContent, 1, {
alpha:0,
delay:2
}, 0.1)
.to(monitorScreen, 1, {
y:330,
ease:Power1.easeIn
},'-=1')
.to(monitorEdge, 1, {
y:330,
ease:Power1.easeIn
},'-=0.75')
.to(monitorBottom,1, {
scaleX:0.69,
y:-23
})
.to(monitorBottom,1, {
scaleY:0.45,
alpha:1
}, '-=1')
.set(monitorBottom, {
alpha:0
})
.to(monitorLogo, 0.5, {
scale:0,
ease:Back.easeIn
},'-=1')
.to(monitorStand, 1, {
//scaleY:0
y:-120
},'-=1.5')
.to(monitorStandShadow, 0.5, {
alpha:0
},'-=1.5')
.from(laptopBase, 1, {
alpha:0
}, '-=1')
.from(laptopTrackpad, 1, {
scaleX:0
}, '-=1')
.from(laptopScreen, 1, {
scale:0,
ease:Back.easeOut.config(0.5)
})
.from(laptopEdgeLeft, 2, {
skewX:-40,
scaleY:0,
ease:Power3.easeOut
},'-=2')
.from(laptopEdgeRight, 2, {
skewX:40,
scaleY:0,
ease:Power3.easeOut
},'-=2')
.staggerFrom(laptopContent, 1, {
scaleX:0
},0.1)
/*
.to(laptopBase, 1, {
y:-60,
scaleX:0
})
*/
.to(laptopTrackpad, 0.3, {
alpha:0,
delay:2
})
.to(laptopScreen, 1, {
scaleX:0.67
})
.to(laptopScreen, 1, {
scaleY:0.8
},'-=1')
.to(laptopContentGroup, 1,{
alpha:0,
scale:0.5
},'-=1')
.to(laptopBase, 1, {
y:-20,
scaleX:0
},'-=1')
.to(laptopEdgeLeft, 1, {
x:40,
transformOrigin:'50% 50%',
scaleY:0.85
},'-=1')
.to(laptopEdgeRight, 1, {
x:-40,
transformOrigin:'50% 50%',
scaleY:0.85
}, '-=1')
.set(laptopGroup,{
alpha:0
})
.from(tabletGroup, 1,{
scale:1.1,
//y:20,
alpha:0
}, '-=1')
.to(tabletGroup, 2, {
rotation:0,
delay:2,
ease:Anticipate.easeOut.config(0.3)
})
.staggerFrom([tabletButton, tabletCamera], 0.5, {
scale:0,
ease:Back.easeOut
},0.1,"-=1")
.from(tabletContentGroup, 2, {
rotation:90,
scaleX:1.33,
scaleY:0.8,
ease:Power3.easeInOut
},'-=0')
.to([tabletButton, tabletCamera], 0.5, {
scale:0,
delay:2
})
.to(tabletGroup, 1, {
scaleX:0.45
})
.to(tabletGroup, 1, {
scaleY:0.7
},'-=1')
.to(tabletContentGroup, 1, {
y:-5
},'-=1')
.to(tabletScreen, 0.5,{
scaleY:0.92,
y:4
},'-=0.5')
.set(phoneGroup,{
alpha:1
})
.set([tabletGroup, tabletContentGroup], {
alpha:0
})
.staggerFrom([phoneButton, phoneCamera, phoneSpeaker], 1,{
scale:0,
ease:Back.easeOut
},0.1)
.to(phoneGroup,2, {
y:80,
//alpha:0,
delay:2,
//scaleX:0.51,
ease:Back.easeIn.config(2)
})
TweenMax.set('svg',{
visibility:'visible'
})
Raw
scripts
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/TweenMax.min.js"></script>
Raw
style.css
body{
background-color:#7E82AB;
overflow:hidden;
}
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.container{
max-width:600px;
height:600px;
}
svg{
max-width:100%;
visibility:hidden;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment