Skip to content

Instantly share code, notes, and snippets.

@ganesh-vellanki

ganesh-vellanki/index.html

Created July 7, 2018 15:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ganesh-vellanki/b62129cb3ec66844317417effdd6a177 to your computer and use it in GitHub Desktop.
Save ganesh-vellanki/b62129cb3ec66844317417effdd6a177 to your computer and use it in GitHub Desktop.
Download ZIP
SVG animation
Raw
index.html
<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1186.4 662.8" style="enable-background:new 0 0 1186.4 662.8;" xml:space="preserve">
<g id="background">
<rect x="-9.7" y="0" fill="#2c3e50" width="1197.1" height="662.8"/>
</g>
<g id="table_legs">
<g>
<defs>
<rect id="SVGID_1_" x="-9.7" y="0" width="1197.1" height="662.8"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
<rect x="47.2" y="626.1" style="clip-path:url(#SVGID_2_);fill:#EDCF94;stroke:#0B0B0B;stroke-miterlimit:10;" width="34" height="56.4"/>
<rect x="850.5" y="626.6" style="clip-path:url(#SVGID_2_);fill:#EDCF94;stroke:#0B0B0B;stroke-miterlimit:10;" width="281.4" height="49.9"/>
<path style="clip-path:url(#SVGID_2_);fill:#FFCF0A;" d="M273.8,586.3"/>
</g>
</g>
<g id="table">
<path style="fill:#EDCF94;stroke:#0B0B0B;stroke-miterlimit:10;" d="M1172,626.1H18.4c-2.7,0-5-1.1-5-2.5v-14.3
c0-1.4,2.2-2.5,5-2.5H1172c2.7,0,5,1.1,5,2.5v14.3C1177,625,1174.8,626.1,1172,626.1z"/>
<rect x="851" y="627.2" style="fill:#D7B476;" width="280.4" height="10.5"/>
<rect x="47.7" y="626.7" style="fill:#D7B476;" width="33" height="6.6"/>
</g>
<g id="computer">
<polygon style="fill:#888889;stroke:#050606;stroke-miterlimit:10;" points="548.7,548.3 544.4,575.1 643.1,575.1 637.8,548.3 "/>
<polyline style="fill:#767677;" points="548.4,555.7 547.6,561.7 639.5,561.7 638.4,554.7 548.9,554.7 "/>
<path style="fill:#E5E9ED;stroke:#050606;stroke-miterlimit:10;" d="M768.1,556.4H419.5c-6.8,0-12.3-5.3-12.3-11.8V285.1
c0-6.5,5.5-11.8,12.3-11.8h348.5c6.8,0,12.3,5.3,12.3,11.8v259.4C780.4,551.1,774.9,556.4,768.1,556.4z"/>
<path style="fill:#202021;stroke:#050606;stroke-miterlimit:10;" d="M770.8,510.3H413c-3.2,0-5.8-2.6-5.8-5.8V284.2
c0-6.1,4.9-11,11-11h350.6c6.4,0,11.7,5.2,11.7,11.7v215.8C780.4,506,776.1,510.3,770.8,510.3z"/>
<rect x="423.3" y="286.1" style="fill:#434445;stroke:#070808;stroke-miterlimit:10;" width="341" height="211.3"/>
<path style="fill:#C7C6C6;stroke:#070808;stroke-width:2;stroke-miterlimit:10;" d="M518.9,596.3l1,5.6c0.2,1.3,1.3,2.2,2.6,2.2
h138.2c2.9,0,5.4-2.1,5.9-4.9l0-0.1c0.2-1-0.6-1.8-1.5-1.8L518.9,596.3z"/>
<path style="fill:#A3A3A2;stroke:#070808;stroke-miterlimit:10;" d="M544.1,575.1l-25.4,20.3c-1.3,1.1-0.6,3.3,1.2,3.3l145.5-0.4
c1.1,0,1.6-1.3,0.8-2l-23.8-21.2H544.1z"/>
<path style="fill:#A3A3A2;" d="M545.5,574l-0.6,1.3c-1,1-1.4,1.3-2,1.9l-4.7,3.7l109.2,0.4l-3-3.1c-0.4-0.4-0.9-0.8-1.2-1.2
c-0.7-0.8-0.7-0.6-1.1-1.7l0-1.3H545.5z"/>
<path style="fill:#A3A3A2;" d="M521.8,601.8c0.3,0.6,1.2,1.8,2,1.8h135.7c0.5,0,1.1-0.1,1.6-0.2c0.5-0.2,1.2-1.2,1.8-1.6H521.8z"/>
<circle style="fill:#5FBB46;" cx="593.8" cy="280.6" r="1.3"/>
<path style="fill:#2D2D2D;" d="M589.7,275.5L423.6,278c0,0-9.7,0.9-10.9,10.3c-1.2,9.4-1.9,118.4-3.4,138.9s0-138.9,0-138.9
s-1.9-13.4,14.2-13.1L589.7,275.5z"/>
<path style="fill:#2D2D2D;" d="M597.2,275.5l166.1,2.5c0,0,9.7,0.9,10.9,10.3c1.2,9.4,1.9,118.4,3.4,138.9
c1.5,20.5,0-138.9,0-138.9s1.9-13.4-14.2-13.1L597.2,275.5z"/>
<path style="fill:#CED1D3;" d="M763.9,555.4H422.6c-10.5,1-14.1-5.4-14.2-8.6l0,0c1.4,0.4,2.9,0.6,4.4,0.6l358.8,1.6
c2.5,0,4.9-0.4,7.2-1.3l0,0C777.7,551.1,775.2,556.4,763.9,555.4z"/>
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#434445;" d="M593.3,525.8c0.6,0,1.4,0.1,2.2,0.4c0.9,0.3,1.5,0.4,1.7,0.4
c0.4,0,1-0.1,1.8-0.4c0.8-0.3,1.6-0.4,2.2-0.4c1,0,1.9,0.3,2.7,0.8c0.4,0.3,0.9,0.7,1.3,1.3c-0.7,0.6-1.1,1.1-1.4,1.5
c-0.5,0.8-0.8,1.7-0.8,2.6c0,1,0.3,2,0.9,2.8c0.6,0.8,1.2,1.4,2,1.6c-0.3,1-0.8,2.1-1.5,3.2c-1.1,1.6-2.2,2.5-3.2,2.5
c-0.4,0-1-0.1-1.8-0.4c-0.7-0.3-1.4-0.4-1.9-0.4c-0.5,0-1.1,0.1-1.8,0.4c-0.7,0.3-1.2,0.4-1.7,0.4c-1.3,0-2.5-1.1-3.8-3.3
c-1.2-2.2-1.9-4.3-1.9-6.3c0-1.9,0.5-3.5,1.4-4.7C590.6,526.4,591.8,525.8,593.3,525.8L593.3,525.8z"/>
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#434445;" d="M601,521c0,0.1,0.1,0.2,0.1,0.3c0,0.1,0,0.2,0,0.2
c0,0.5-0.1,1.1-0.4,1.7c-0.2,0.6-0.6,1.2-1.2,1.7c-0.5,0.5-0.9,0.8-1.4,0.9c-0.3,0.1-0.7,0.2-1.3,0.2c0-1.2,0.3-2.3,1-3.2
C598.5,521.9,599.6,521.3,601,521L601,521z"/>
</g>
<g id="keyboard">
<path style="fill:#E5E9ED;stroke:#0D0D0D;stroke-miterlimit:10;" d="M692.9,606.8H363.5V602c0-4,3.2-7.2,7.2-7.2h315
c4,0,7.3,3.3,7.3,7.3V606.8z"/>
<polygon style="fill:#D2D6D8;" points="692,605.9 364.3,605.9 364.4,602.6 692.1,602.6 "/>
<rect x="376.7" y="593" width="21.4" height="1.9"/>
<rect x="469.8" y="593" width="21.4" height="1.9"/>
<rect x="492.8" y="592.9" width="95.4" height="1.9"/>
<rect x="399.6" y="593" width="21.4" height="1.9"/>
<rect x="422.8" y="593" width="21.4" height="1.9"/>
<rect x="445.9" y="593" width="21.4" height="1.9"/>
<rect x="590.3" y="592.9" width="21.4" height="1.9"/>
<rect x="613.2" y="592.9" width="21.4" height="1.9"/>
<rect x="636.3" y="592.9" width="21.4" height="1.9"/>
<rect x="659.5" y="592.9" width="21.4" height="1.9"/>
<path style="fill:#FFFFFF;stroke:#0D0D0D;stroke-miterlimit:10;" d="M397.1,593.9h-19.3v-2.1c0-0.6,1-1.2,2.3-1.2h14.6
c1.3,0,2.4,0.5,2.4,1.2V593.9z"/>
<path style="fill:#FFFFFF;stroke:#0D0D0D;stroke-miterlimit:10;" d="M419.9,593.9h-19.3v-2.1c0-0.6,1-1.2,2.3-1.2h14.6
c1.3,0,2.4,0.5,2.4,1.2V593.9z"/>
<path style="fill:#FFFFFF;stroke:#0D0D0D;stroke-miterlimit:10;" d="M443.1,593.9h-19.3v-2.1c0-0.6,1-1.2,2.3-1.2h14.6
c1.3,0,2.4,0.5,2.4,1.2V593.9z"/>
<path style="fill:#FFFFFF;stroke:#0D0D0D;stroke-miterlimit:10;" d="M466.3,593.9H447v-2.1c0-0.6,1-1.2,2.3-1.2h14.6
c1.3,0,2.4,0.5,2.4,1.2V593.9z"/>
<path style="fill:#FFFFFF;stroke:#0D0D0D;stroke-miterlimit:10;" d="M610.7,593.9h-19.3v-2.1c0-0.6,1-1.2,2.3-1.2h14.6
c1.3,0,2.4,0.5,2.4,1.2V593.9z"/>
<path style="fill:#FFFFFF;stroke:#0D0D0D;stroke-miterlimit:10;" d="M633.5,593.9h-19.3v-2.1c0-0.6,1-1.2,2.3-1.2h14.6
c1.3,0,2.4,0.5,2.4,1.2V593.9z"/>
<path style="fill:#FFFFFF;stroke:#0D0D0D;stroke-miterlimit:10;" d="M656.7,593.9h-19.3v-2.1c0-0.6,1-1.2,2.3-1.2h14.6
c1.3,0,2.4,0.5,2.4,1.2V593.9z"/>
<path style="fill:#FFFFFF;stroke:#0D0D0D;stroke-miterlimit:10;" d="M679.9,593.9h-19.3v-2.1c0-0.6,1-1.2,2.3-1.2h14.6
c1.3,0,2.4,0.5,2.4,1.2V593.9z"/>
<path style="fill:#FFFFFF;stroke:#0D0D0D;stroke-miterlimit:10;" d="M490.1,593.9h-19.3v-2.1c0-0.6,1-1.2,2.3-1.2h14.6
c1.3,0,2.4,0.5,2.4,1.2V593.9z"/>
<path style="fill:#FFFFFF;stroke:#0D0D0D;stroke-miterlimit:10;" d="M587.1,594h-93.6v-2.1c0-0.7,5-1.2,11.2-1.2h70.9
c6.3,0,11.5,0.5,11.5,1.2V594z"/>
</g>
<g id="lamp">
<g id="lamp-body">
<g id="lamp-header">
<g id="lamp-line-t">
<polyline style="fill:#228370;stroke:#0B0B0B;stroke-miterlimit:10;" points="187.9,333.9 194.8,337.7 70.9,417.1 65.2,411.6
187.9,333.9 "/>
<polyline style="fill:#228370;stroke:#0B0B0B;stroke-miterlimit:10;" points="198.6,342.1 205.5,346.9 84.1,425.2 79,419.7
198.6,342.1 "/>
</g>
<g id="lamp-head">
<ellipse style="fill:#228370;stroke:#0B0B0B;stroke-miterlimit:10;" cx="193.8" cy="347.5" rx="18.5" ry="19.3"/>
<path style="fill:#E8DF9A;stroke:#0B0B0B;stroke-miterlimit:10;" d="M225.9,393.2c0,0,13,10.9,26.6,2.5c2.4-1.5,4.4-3.9,5.7-6.6
c3.3-6.8,7.6-20.6-5-31.8L225.9,393.2z"/>
<path style="fill:#3FBDA4;stroke:#0B0B0B;stroke-miterlimit:10;" d="M270.5,319.1c-20.6-7.9-47.5-7.3-64.6,4.4
c-11.4,7.8-20,19-24.3,33.7c-8.6,29.1,1.8,61,22.5,79.4c1.3,1.2,3.3,1,4.3-0.5L285.7,330c0.7-0.9,0.5-2.3-0.4-2.9
C280.8,323.8,275.9,321.1,270.5,319.1z"/>
</g>
</g>
<g id="lamp-line-b">
<polyline style="fill:#228370;stroke:#0B0B0B;stroke-miterlimit:10;" points="69.7,432.6 74.6,426.3 125.8,567.8 119.5,572.6 69.7,432.6 "/>
<polyline style="fill:#228370;stroke:#0B0B0B;stroke-miterlimit:10;" points="81.6,429.1 87.5,422.9 138.2,561.8 132,566 81.6,429.1 "/>
</g>
<ellipse id="lamp-circle" style="fill:#3FBDA4;stroke:#0B0B0B;stroke-miterlimit:10;" cx="80.2" cy="422.9" rx="19.7" ry="20.5"/>
</g>
<path class="lamp-leg" style="fill:#228370;stroke:#0B0B0B;stroke-miterlimit:10;" d="M193.8,606.2H66.2v-11.6c0-1.6,2.1-2.9,4.7-2.9h121.2
c1,0,1.7,0.5,1.7,1.1V606.2z"/>
<g id="lamp-bottom">
<path style="fill:#3FBDA4;stroke:#0B0B0B;stroke-miterlimit:10;" d="M81.6,591.6c0,0,10.6-32.8,48.4-31.4c0,0,39,2.3,48.7,31.4
H81.6z"/>
<path style="fill:#70BAAF;stroke:#0B0B0B;stroke-miterlimit:10;" d="M147.9,564c0,0,8.8,4.6,17-0.4c0.5-0.3,1,0.1,1,0.8v9.2
C165.9,573.6,152.1,565.3,147.9,564z"/>
</g>
<polyline class="light" style="opacity:0;fill:#FCF1C4;" points="276.4,343 781.8,605.3 312.8,606.8 223,418.9 "/>
<g id="lamp-line">
<path style="fill:#2FAF97;" d="M182.3,357.8c-8.4,28.4,1.9,61.2,23.2,78.5c1.2-0.5-1.2,0.5,0,0l-3.4-108.7
C192.9,335.1,186,345.2,182.3,357.8z"/>
<path style="fill:#2FAF97;" d="M61.3,422.9c0,10.7,8.4,19.6,18.2,19.6c0.2,0,0.4,0,0.6,0L74,404.3
C66.8,406.8,61.3,414.2,61.3,422.9z"/>
<path style="fill:#2FAF97;" d="M83,590.7H122l-8.3-27.8C90.4,569.8,83,590.7,83,590.7z"/>
<path style="fill:none;stroke:#BFE4E2;stroke-linecap:round;stroke-miterlimit:10;" d="M220.9,321.6c-0.4-0.1,26.1-7,46,3.5"/>
<line style="fill:none;stroke:#BFE4E2;stroke-linecap:round;stroke-miterlimit:10;" x1="271.7" y1="328.3" x2="274.8" y2="330"/>
<path style="fill:none;stroke:#BFE4E2;stroke-linecap:round;stroke-miterlimit:10;" d="M88.5,409.4c0,0,9.3,7.1,6.2,16.8"/>
<path style="fill:none;stroke:#BFE4E2;stroke-linecap:round;stroke-miterlimit:10;" d="M125.8,564.4c0,0,17,1,28.6,9.2"/>
<line style="fill:none;stroke:#BFE4E2;stroke-linecap:round;stroke-miterlimit:10;" x1="160.2" y1="577.1" x2="163.3" y2="579.5"/>
</g>
</g>
<g id="computer_mouse">
<path style="fill:#E5E9ED;stroke:#0B0B0B;stroke-miterlimit:10;" d="M724.1,606.7c0,0,0-8.6,12.9-14.3c8.7-3.9,18.7-4,27.5-0.6
c6.8,2.6,13.7,7.2,13.7,15L724.1,606.7z"/>
<path style="fill:#D1D4D6;" d="M764.5,592.5c-3.9-1.4-9-2.6-13.3-2.4v15.7l26.1,0.1C777.2,601.6,773,595.6,764.5,592.5z"/>
</g>
<g id="coffee_mug">
<polyline style="fill:#F9EFE5;stroke:#0D0D0D;stroke-miterlimit:10;" points="849.8,516.5 865.1,606.8 908,606.8 922.4,516.5
853.7,516.5 "/>
<polygon style="fill:#F3E5D4;" points="921.2,519.5 886.1,516.5 885.7,605.9 907.4,605.9 "/>
<polygon style="fill:#BE5532;stroke:#0D0D0D;stroke-miterlimit:10;" points="853.3,546.7 859.7,581.7 912.8,581.7 918.9,546.7 "/>
<polygon style="fill:#AD4025;" points="917.8,547.7 886.2,547.7 886.1,580.9 912.2,580.9 "/>
<line style="fill:none;stroke:#9B3021;stroke-linecap:round;stroke-miterlimit:10;" x1="858.3" y1="551.2" x2="914.7" y2="551.2"/>
<line style="fill:none;stroke:#9B3021;stroke-linecap:round;stroke-miterlimit:10;" x1="860.1" y1="557.9" x2="913.7" y2="557.9"/>
<line style="fill:none;stroke:#9B3021;stroke-linecap:round;stroke-miterlimit:10;" x1="861.1" y1="565.8" x2="911.6" y2="565.8"/>
<line style="fill:none;stroke:#9B3021;stroke-linecap:round;stroke-miterlimit:10;" x1="862.1" y1="573.1" x2="910.5" y2="573.1"/>
<line style="fill:none;stroke:#9B3021;stroke-linecap:round;stroke-miterlimit:10;" x1="862" y1="578.7" x2="909.5" y2="578.7"/>
<polygon style="fill:#BE5532;stroke:#0B0B0B;stroke-miterlimit:10;" points="845.3,524.5 926.2,524.5 926.2,516.5 849.8,516.5
845.3,516.5 "/>
<polygon style="fill:#BE5532;stroke:#070808;stroke-miterlimit:10;" points="851.8,505.9 849.8,516.5 921.2,516.5 918.9,505.9 "/>
<polygon style="fill:#AD4025;" points="925.2,517.5 920,517.5 886.7,517.5 886.7,523.6 925.2,523.8 "/>
<polygon style="fill:#AD4025;" points="920,515.7 918.2,506.7 886.8,506.8 886.8,515.7 "/>
<polygon style="fill:#9B3021;" points="850.9,515.7 851.2,513.7 919.6,513.7 920,515.7 "/>
</g>
</svg>
Raw
script.js
var tl = new TimelineMax();
var bgd = $('#background rect');
var table = $('#table_legs, #table');
var lampLeg = $('#lamp > .lamp-leg');
var lampbt = $('#lamp-bottom');
var lampLight = $('#lamp > .light');
var lampLine = $('#lamp-line');
var lampLineB = $('#lamp-line-b');
var lampLineT = $('#lamp-line-t');
var lampCircle = $('#lamp-circle');
var lampHead = $('#lamp-head');
var lampHeader = $('#lamp-header');
var lampBody = $('#lamp-body');
var computer = $('#computer > *');
var keyboard = $('#keyboard > *');
var asset = $('#computer_mouse > * , #coffee_mug > *');
tl.from(bgd, 0.2, {opacity:0, scale:0, transformOrigin: 'center center'})
.staggerFrom(table, 0.2, {y:"-=200", opacity: 0, ease: Elastic.easeOut}, 0.1)
.from(lampLeg, 0.2, {opacity:0, x: "-200", ease: Elastic.easeOut})
.from(lampbt, 0.2, {opacity:0, scale:0, transformOrigin: 'center center'})
.from(lampLineB, 0.3,{opacity:0, transformOrigin: '100% 100%', rotation: '-180deg'})
.from(lampCircle,0.1,{opacity:0, x: '-=100', y: '-=100'})
.from(lampLineT, 0.3,{opacity:0, transformOrigin: '0% 100%', rotation: '-180deg'})
.from(lampHead, 0.2, {opacity:0, scale:0, ease: Elastic.easeOut})
.from(lampHeader, 0.5, {transformOrigin: '60% 60%', rotation: '60deg'})
.from(lampBody, 0.5, {transformOrigin: '70% 70%', rotation: '-25deg'})
.staggerFrom(computer, 1, {opacity: 0, scale: 0, transformOrigin: 'center center', ease: Back .easeOut}, 0.2)
.staggerFrom(keyboard, 0.5, {opacity: 0, y: '-=100', ease: Linear.easeInOut }, 0.05)
.staggerFrom(asset, 0.5, {opacity: 0}, 0.05)
.to(lampLight, 0.2, {opacity:0.8, ease: Elastic.easeOut, delay:0.5}, "a")
.to(lampLight, 0.1, {opacity:0}, "b")
.to(lampLight, 0.1, {opacity:0.2}, "c")
.to(bgd, 0.2, {opacity: 0.1, delay:0.5}, "a-=0.05")
.to(bgd, 0.1, {opacity: 1}, "b-=0.05")
.to(bgd, 0.1, {opacity: 0.5}, "c-=0.05")
.to(bgd, 0.2, {opacity: 1, fill: '#FDD10D'})
.fromTo(lampLine, 0.2, {opacity: 0},{opacity: 0.2, delay:0.5}, "a-=0.05")
.to(lampLine, 0.1, {opacity: 1}, "b-=0.05")
.to(lampLine, 0.1, {opacity: 0.5}, "c-=0.05");
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment