Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<svg id='big_screen'width="544px" height="374px" viewBox="0 0 544 374" >
   

  <path d="M17.8784366,5.13886711e-07 C10.7658725,2.30074917e-07 5,5.8134581 5,12.9980973 L5,221.001903 C5,228.180554 10.7609,234 17.8754448,234 L227.457512,234 L426.128351,234 C433.237166,234 439,228.186542 439,221.001903 L439,12.9980973 C439,5.81944638 433.231578,0 426.121183,0 L222,0 L17.8784366,5.13886711e-07 L17.8784366,5.13886711e-07 Z" id="element_screen" stroke="#414143" stroke-width="8" fill="#575757"></path>
  <path d="M292.522467,171.345181 C291.617774,173.883006 291.83505,179.422589 284.608758,186.281604 C277.382466,193.140621 268.41932,188.929452 267.008448,190.258494 C262.040284,194.938505 259.797463,201.999985 245.513288,202 C231.229111,202.000012 227.214846,190.846664 227.214846,184.248748 L227.214846,70.158357 L227.214844,42.3599026 C227.214844,42.3599026 230.981019,30.2305151 241.324122,27.9347658 C266.475299,22.3522258 265.217823,43.5662096 269.95907,44.3193157 C273.948631,44.9530231 287.09574,46.2054499 291.069991,54.9232937 C295.044241,63.6411371 286.62867,71.0566064 291.069991,75.461373 C292.460658,76.8405944 302.891725,78.1679001 304.607071,88.7040921 C306.322417,99.240284 300.037611,101.695156 300.037611,105.057172 C300.037611,107.112634 312.214844,105.433002 312.214844,120.28986 C312.214844,135.146719 303.686878,135.514552 304.607071,137.131987 C305.915613,139.43203 312.857873,144.766775 310.387707,158.050454 C307.91754,171.334133 292.828628,170.486347 292.522467,171.345181 L292.522467,171.345181 L292.522467,171.345181 Z" id="Path" stroke="#FFFFFF" stroke-width="2" fill="#FFFFFF"></path>
  <path d="M181.421241,190.258494 C186.389404,194.938505 188.632225,201.999985 202.916401,202 C217.200577,202.000012 221.214842,190.846664 221.214842,184.248749 L221.214842,70.1583569 L221.214844,42.3599025 C221.214844,42.3599025 217.44867,30.2305151 207.105566,27.9347659 C181.95439,22.3522257 183.211866,43.5662096 178.470619,44.3193157 C174.481056,44.953023 161.333948,46.2054497 157.359697,54.9232935 C153.385447,63.6411371 161.801019,71.0566062 157.359697,75.4613728 C155.969031,76.8405942 145.537962,78.1679 143.822618,88.7040919 C142.107271,99.240284 148.392077,101.695156 148.392077,105.057172 C148.392077,107.112634 136.214844,105.433001 136.214844,120.28986 C136.214844,135.146719 144.742811,135.514551 143.822618,137.131986 C142.514075,139.432029 135.571816,144.766775 138.041981,158.050454 C140.512147,171.334134 155.601061,170.486347 155.907221,171.345182 C156.811914,173.883006 156.594639,179.422588 163.820931,186.281603 C171.047223,193.140622 180.010368,188.929451 181.421241,190.258494 L181.421241,190.258494 Z" id="Path" stroke="#FFFFFF" stroke-width="2" fill="#FFFFFF"></path>
  <path d="M195.5,307.628906 L145.214844,307.628906 L145.214844,328 L297.632812,328 L297.632812,307.628906 L251.5,307.628906 L251.5,270 L195.5,270 L195.5,307.628906 L195.5,307.628906 Z" id="element_3" fill="#FFFFFF" stroke="#414143" stroke-width="0.5"></path>
  <path d="M14.3420458,270 L213.01482,270 L428.184038,270 C435.986369,270 442.311408,263.731879 442.311408,255.991365 L442.311406,221 L0.214844,221 L0.214844,255.991365 C0.214844,263.72812 6.5402012,270 14.3420458,270 L14.3420458,270 L14.3420458,270 Z" id="element_2" fill="#FFFFFF" stroke="#414143" stroke-width="0.5"></path>
                 
</svg>
              
            
!

CSS

              
                body {
  background  : #FF6E6E;
  text-align  :center;
}
svg {
  padding : 10px;
  margin : 5% auto;
 
}
              
            
!

JS

              
                /* SNAP svg transitions 
Inspired by this cool guy's pen : https://codepen.io/kevinjannis/details/Eianz/  
Snap has lots of cool transitions : easein , easeout , easeinout , bounce , elastic , backin and backout. 
Be sure to check them all out. 
*/


function Svg (element , trigger , selector ) {
  this.element  = element;
  this.svg      = Snap(element);
  this.trigger  = trigger;
  this.selector = selector;  
}
var iMac = new Svg( 
  document.getElementById('big_screen'), 
  document.getElementById("big_screen"), 
  ['path:nth-child(1)','path:nth-child(2)','path:nth-child(3)','path:nth-child(4)','path:nth-child(5)' ]

);

var paths = [
   ["M17.8784366,5.13886711e-07 C10.7658725,2.30074917e-07 5,5.8134581 5,12.9980973 L5,221.001903 C5,228.180554 10.7609,234 17.8754448,234 L227.457512,234 L426.128351,234 C433.237166,234 439,228.186542 439,221.001903 L439,12.9980973 C439,5.81944638 433.231578,0 426.121183,0 L222,0 L17.8784366,5.13886711e-07 L17.8784366,5.13886711e-07 Z" ,"M292.522467,171.345181 C291.617774,173.883006 291.83505,179.422589 284.608758,186.281604 C277.382466,193.140621 268.41932,188.929452 267.008448,190.258494 C262.040284,194.938505 259.797463,201.999985 245.513288,202 C231.229111,202.000012 227.214846,190.846664 227.214846,184.248748 L227.214846,70.158357 L227.214844,42.3599026 C227.214844,42.3599026 230.981019,30.2305151 241.324122,27.9347658 C266.475299,22.3522258 265.217823,43.5662096 269.95907,44.3193157 C273.948631,44.9530231 287.09574,46.2054499 291.069991,54.9232937 C295.044241,63.6411371 286.62867,71.0566064 291.069991,75.461373 C292.460658,76.8405944 302.891725,78.1679001 304.607071,88.7040921 C306.322417,99.240284 300.037611,101.695156 300.037611,105.057172 C300.037611,107.112634 312.214844,105.433002 312.214844,120.28986 C312.214844,135.146719 303.686878,135.514552 304.607071,137.131987 C305.915613,139.43203 312.857873,144.766775 310.387707,158.050454 C307.91754,171.334133 292.828628,170.486347 292.522467,171.345181 L292.522467,171.345181 L292.522467,171.345181 Z","M181.421241,190.258494 C186.389404,194.938505 188.632225,201.999985 202.916401,202 C217.200577,202.000012 221.214842,190.846664 221.214842,184.248749 L221.214842,70.1583569 L221.214844,42.3599025 C221.214844,42.3599025 217.44867,30.2305151 207.105566,27.9347659 C181.95439,22.3522257 183.211866,43.5662096 178.470619,44.3193157 C174.481056,44.953023 161.333948,46.2054497 157.359697,54.9232935 C153.385447,63.6411371 161.801019,71.0566062 157.359697,75.4613728 C155.969031,76.8405942 145.537962,78.1679 143.822618,88.7040919 C142.107271,99.240284 148.392077,101.695156 148.392077,105.057172 C148.392077,107.112634 136.214844,105.433001 136.214844,120.28986 C136.214844,135.146719 144.742811,135.514551 143.822618,137.131986 C142.514075,139.432029 135.571816,144.766775 138.041981,158.050454 C140.512147,171.334134 155.601061,170.486347 155.907221,171.345182 C156.811914,173.883006 156.594639,179.422588 163.820931,186.281603 C171.047223,193.140622 180.010368,188.929451 181.421241,190.258494 L181.421241,190.258494 Z","M195.5,307.628906 L145.214844,307.628906 L145.214844,328 L297.632812,328 L297.632812,307.628906 L251.5,307.628906 L251.5,270 L195.5,270 L195.5,307.628906 L195.5,307.628906 Z","M14.3420458,270 L213.01482,270 L428.184038,270 C435.986369,270 442.311408,263.731879 442.311408,255.991365 L442.311406,221 L0.214844,221 L0.214844,255.991365 C0.214844,263.72812 6.5402012,270 14.3420458,270 L14.3420458,270 L14.3420458,270 Z"], // iMac
  ["M354.848535,222.096282 L354.848535,125.997592 L354.848535,34.9019773 C354.848535,31.6424055 347.119835,29 337.568218,29 L61.0375979,29 C51.4939418,29 43.7572799,31.6449677 43.7572799,34.905264 L43.7572799,128.5 L43.7572806,222.09491 C43.7572802,225.356201 51.4859807,228 61.0375979,228 L337.568218,228 C347.111874,228 354.848535,225.358481 354.848535,222.096282 Z","M227.538943,186.709292 C224.616493,190.72073 223.297187,196.773427 214.894731,196.77344 C206.492274,196.77345 204.130941,187.213437 204.130941,181.558081 L204.130941,83.7663171 L204.13094,59.9390705 C204.13094,59.9390705 206.346337,49.5424526 212.430516,47.5746675 C227.225326,42.7896332 226.485634,60.9730479 229.274603,61.6185674 C231.621403,62.1617452 239.354997,63.2352539 241.692791,70.7076914 C244.030586,78.1801286 239.08025,84.5362452 241.692791,88.3117594 C242.510831,89.4939492 248.646753,90.6316398 249.65578,99.6626615 C250.664807,108.693683 246.967862,110.797859 246.967862,113.679587 C246.967862,115.441412 254.13094,114.001727 254.13094,126.736177 C254.13094,139.470627 249.11449,139.785913 249.65578,141.172286 C250.42551,143.143751 254.509193,147.71639 253.056154,159.1024 C251.603114,170.488411 242.727284,169.761737 242.547189,170.497881 C242.015017,172.673159 242.142826,177.421373 237.892066,183.300529 C233.641306,189.179686 228.368867,185.570113 227.538943,186.709292 Z","M196.802906,181.558082 L196.802906,83.766317 L196.802908,59.9390704 C196.802908,59.9390704 194.587511,49.5424526 188.503332,47.5746676 C173.708523,42.7896331 174.448215,60.9730479 171.659246,61.6185674 C169.312444,62.1617451 161.578851,63.2352537 159.241056,70.7076912 C156.903262,78.1801286 161.853599,84.536245 159.241056,88.3117592 C158.423018,89.493949 152.287095,90.6316397 151.278069,99.6626613 C150.269041,108.693683 153.965986,110.797859 153.965986,113.679587 C153.965986,115.441412 146.802908,114.001726 146.802908,126.736177 C146.802908,139.470627 151.819359,139.785912 151.278069,141.172285 C150.508338,143.14375 146.424656,147.71639 147.877694,159.1024 C149.330733,170.488412 158.206565,169.761737 158.386659,170.497881 C158.918831,172.673159 158.791022,177.421372 163.041782,183.300528 C167.292542,189.179687 172.564981,185.570112 173.394906,186.709292 C176.317355,190.72073 177.636661,196.773427 186.039118,196.77344 C194.441574,196.77345 196.802906,187.213437 196.802906,181.558082 Z" ,"M0.132545666,223.849654 L0.132545666,232.859654 C0.132545666,234.851808 5.83186018,236.466767 12.861529,236.466767 L191.870965,236.466767 L385.744135,236.466767 C392.774242,236.466767 398.473269,234.852775 398.473269,232.859654 L398.473268,223.849652 L0.132545666,223.849654 Z","M205.302908,25.2047697 L199.302908,25.2047697 L199.302908,30.2047697 L205.302908,30.2047697 L205.302908,25.2047697 Z"], // Laptop
  ["M254.446589,17 C243.893183,16.999998 122.344537,17.0000021 108.332523,17 C94.3205099,16.9999979 94.3205099,31.344766 94.3205099,31.344766 L90,224.689606 C90,224.689606 90,239.999998 102.795269,240 C115.590537,240.000002 254.446589,240 254.446589,240 C254.446589,240 264.999995,240 264.999995,224.689606 L264.999995,31.3447659 C264.999995,31.3447659 264.999995,17 254.446589,17 Z"
   ,"M176.999999,98.7295345 L177,86.0216697 C177,86.0216697 175.670762,80.4768069 172.020254,79.4273216 C163.143369,76.8753032 163.587184,86.5731244 161.913803,86.9174014 C160.505722,87.2070962 155.865566,87.7796341 154.462889,91.7649341 C153.060212,95.7502341 156.030415,99.1401628 154.462889,101.15377 C153.972066,101.784272 150.290512,102.39104 149.685097,107.207585 C149.07968,112.02413 151.297847,113.146357 151.297847,114.683278 C151.297847,115.622918 147,114.855086 147,121.646793 C147,128.4385 150.009871,128.606652 149.685097,129.346051 C149.223258,130.397499 146.773049,132.83624 147.644872,138.908779 C148.516695,144.981318 153.842194,144.593758 153.950251,144.986369 C154.269554,146.146517 154.192868,148.678897 156.743324,151.814447 C159.29378,154.949998 162.457244,153.024892 162.955199,153.632454 C164.708668,155.771888 165.500252,158.999993 170.541726,159 C175.5832,159.000005 176.999999,153.901332 176.999999,150.885142 L176.999999,98.7295345 Z"
   ,"M195.044802,153.632455 C193.291332,155.771888 192.499748,158.999993 187.458275,159 C182.4168,159.000006 181.000001,153.901332 181.000001,150.885142 L181.000001,98.7295346 L181,86.0216698 C181,86.0216698 182.329238,80.4768069 185.979746,79.4273215 C194.856632,76.8753032 194.412816,86.5731244 196.086198,86.9174015 C197.494278,87.2070963 202.134434,87.7796343 203.537111,91.7649343 C204.939788,95.7502341 201.969586,99.140163 203.537111,101.153771 C204.027935,101.784272 207.709488,102.39104 208.314904,107.207585 C208.92032,112.02413 206.702153,113.146357 206.702153,114.683279 C206.702153,115.622919 211,114.855087 211,121.646793 C211,128.4385 207.99013,128.606652 208.314904,129.346051 C208.776742,130.397499 211.226952,132.83624 210.355128,138.908779 C209.483304,144.981318 204.157806,144.593759 204.049749,144.986369 C203.730446,146.146517 203.807132,148.678898 201.256676,151.814448 C198.70622,154.949998 195.542756,153.024892 195.044802,153.632455 L195.044802,153.632455 Z"
   ,"M176.830729,19.8079427 L176.830729,24.7454429 L184.080729,24.7454429 L184.080729,19.8079427 L176.830729,19.8079427 Z"  ,"M166,233 L170.657631,238 L181.561412,238 L190.39192,238 L195,233 L166,233 Z"], // I pad
  ["M134.542213,48.7613884 L132.65985,154.718766 C132.65985,154.718766 132.65985,163.10921 138.234504,163.109211 C143.809158,163.109212 204.306091,163.109211 204.306091,163.109211 C204.306091,163.109211 208.904009,163.109211 208.904009,154.718766 L208.904009,48.7613883 C208.904009,48.7613883 208.904009,40.9001297 204.306091,40.9001297 C199.708174,40.9001286 146.751747,40.9001309 140.64698,40.9001297 C134.542213,40.9001286 134.542213,48.7613884 134.542213,48.7613884 Z","M170.999999,88.8647673 L171,82.5108349 C171,82.5108349 170.335381,79.7384034 168.510127,79.2136608 C164.071685,77.9376516 164.293592,82.7865622 163.456901,82.9587007 C162.752861,83.1035481 160.432783,83.3898171 159.731444,85.3824671 C159.030106,87.375117 160.515207,89.0700814 159.731444,90.0768852 C159.486033,90.3921358 157.645256,90.69552 157.342548,93.1037924 C157.03984,95.5120648 158.148923,96.0731784 158.148923,96.8416392 C158.148923,97.3114592 156,96.927543 156,100.323397 C156,103.71925 157.504935,103.803326 157.342548,104.173025 C157.111629,104.698749 155.886524,105.91812 156.322436,108.954389 C156.758348,111.990659 159.421097,111.796879 159.475125,111.993184 C159.634777,112.573258 159.596434,113.839449 160.871662,115.407223 C162.14689,116.974999 163.728622,116.012446 163.977599,116.316227 C164.854334,117.385944 165.250126,118.999997 167.770863,119 C170.2916,119.000003 170.999999,116.450666 170.999999,114.942571 L170.999999,88.8647673 Z"
   ,"M178.229137,119 C175.7084,119.000003 175,116.450666 175,114.942571 L175,88.8647673 L175,82.5108349 C175,82.5108349 175.664619,79.7384035 177.489873,79.2136608 C181.928316,77.9376516 181.706408,82.7865622 182.543099,82.9587007 C183.247139,83.1035481 185.567217,83.3898171 186.268555,85.3824671 C186.969894,87.3751171 185.484793,89.0700815 186.268555,90.0768853 C186.513967,90.3921359 188.354744,90.69552 188.657452,93.1037925 C188.96016,95.5120649 187.851077,96.0731785 187.851077,96.8416393 C187.851077,97.3114593 190,96.9275433 190,100.323397 C190,103.71925 188.495065,103.803326 188.657452,104.173026 C188.888371,104.69875 190.113476,105.91812 189.677564,108.954389 C189.241652,111.990659 186.578903,111.796879 186.524875,111.993184 C186.365223,112.573258 186.403566,113.839449 185.128338,115.407224 C183.85311,116.974999 182.271378,116.012446 182.022401,116.316227 C181.145666,117.385944 180.749874,118.999997 178.229137,119 Z","M164.523679,160.5 L176.727687,160.5 L180.149117,158 L161.414742,158 L164.523679,160.5 Z","M171,44 L167,44 L167,47 L171,45.5 L175,47 L175,44 L171,44 Z"
  ] //Iphone
];   
  
var counter = 0;
function animate_to(obj,counter) {
  var speed = 1050,
      transition = mina.easinout,
      selector = obj.trigger;
      obj.svg.select(obj.selector[0]).animate( { 'path' : paths[counter][0]} , speed, transition);
      obj.svg.select(obj.selector[1]).animate( { 'path' : paths[counter][1]} , speed, transition);
      obj.svg.select(obj.selector[2]).animate( { 'path' : paths[counter][2]} , speed, transition);
      obj.svg.select(obj.selector[3]).animate( { 'path' : paths[counter][3]} , speed, transition);
      obj.svg.select(obj.selector[4]).animate( { 'path' : paths[counter][4]} , speed, transition);
}
setInterval(function(){
  
  animate_to(iMac,counter);
  counter++;
  if (counter == 4){counter = 0;}
 
},1500);


              
            
!
999px

Console