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

              
                <div id="sliderText">Use the slider to change the width of the device</div>
<div id="slider"></div>

<div class="device">
	<div class="box red">
      <svg viewBox="0 0 800 960" preserveAspectRatio="xMinYMin meet" version="1.1" xmlns="http://www.w3.org/2000/svg" class="my-svg" >
			<path d="M 223.80453,960.7821 C 203.37361,958.1501 192.5654,943.15221 181.53542,928.12021 136.83348,866.34101 74.224754,810.80661 60.538594,733.17355 c -4.104801,-66.75522 7.8438,-133.17388 14.0822,-199.32268 3.85088,-46.12001 -25.697981,-90.88319 -6.6775,-136.10241 33.360106,-44.86399 -16.246561,-78.28425 -40.373061,-114.02559 -14.8327,18.83786 -28.29711999,16.25708 -28.30437999,32.9664 -0.25598,20.34348 84.43622099,51.87362 44.04201999,95.53547 -13.81402,27.3696 -12.75348,55.01066 -1.61662,83.02986 8.1844,72.56321 -17.12736,144.53973 -9.4344,217.40533 -3.58044,69.23842 45.572301,123.896 87.479447,174.21762 29.027,19.33706 40.85846,63.65441 76.40418,71.60907 9.21079,0.59254 18.46635,2.55466 27.66405,2.29548 z m 45.33094,-64.65815 c 23.95184,-28.4768 -35.21478,-31.76694 -33.41206,-65.7376 -29.64132,-74.43148 -28.21626,-156.02186 -45.98667,-233.31414 -12.8048,-82.2832 -34.33978,-166.61867 -11.83232,-249.36746 17.4471,-43.70242 12.65264,-85.41015 -28.5094,-114.25869 -10.3421,-19.93012 -46.03592,-44.60531 -42.12372,-11.60588 -42.716126,1.85656 31.3432,32.4304 39.944,47.65443 39.7769,25.41866 -0.60656,64.5056 4.79232,100.80852 -7.288,18.97707 -14.73008,37.18667 -8.16128,57.48533 10.34864,62.07789 5.47408,125.34775 16.22084,187.42507 4.19806,36.40856 -2.21066,74.05122 4.86584,109.90828 21.32184,57.55574 18.01524,129.26826 69.04487,172.39094 9.26948,4.89388 30.38528,14.06134 35.15758,-1.3888 z m 416.62866,-30.06668 c 42.0688,-15.144 94.29633,-30.01866 108.31377,-77.28746 18.74234,-57.74932 -19.72284,-113.21654 -14.5648,-171.13226 -15.27443,-42.44854 -47.48029,-80.70188 -62.44241,-125.28801 -30.49702,-71.28908 -59.63872,-143.29973 -84.89686,-216.50293 6.39552,-13.95203 38.2776,55.0448 48.99632,74.10666 13.13796,17.38614 20.96826,77.70133 21.27344,71.79679 9.44976,-45.38237 -11.0839,-82.64265 -27.95392,-123.20853 -9.58348,-22.38452 -51.0112,-71.96747 -0.23788,-54.70987 -26.7883,-19.5824 29.15292,-4.46668 -5.96884,-24.76694 -11.28752,-13.60746 27.8464,-4.81652 5.61018,-21.44851 28.22476,-14.3248 -46.76582,-17.48748 0.93174,-22.39894 18.32186,-9.5312 -40.57808,-10.976 -1.46518,-18.61548 36.8735,-3.57384 53.16748,-90.918403 21.58646,-87.024523 -19.18442,10.15732 -85.14144,46.877863 -80.88256,19.48108 27.64128,-15.89656 -29.2486,-3.83948 1.79316,-23.00802 -21.08622,3.89012 -11.96148,-11.2144 -25.68916,-14.18294 -6.25638,-5.18346 -17.8469,-15.14026 -18.8687,-23.25332 -6.81446,-1.21706 -34.23392,6.4432 -14.16934,-15.6448 -21.00096,10.08748 -26.73636,-28.13066 -39.63248,3.80586 -1.76212,-25.1082602 -7.54538,2.71466 -21.47652,-15.96960023 C 482.59381,27.360727 492.64349,96.454587 460.64811,95.062587 c -12.68224,-19.20584 29.79456,-92.0255802 -2.83806,-77.88746 -9.85522,0.0586 -29.53808,7.44266 -40.05058,5.05866 -26.79546,-2.46238 6.71622,57.74348 -35.26596,26.48588 -10.5465,3.09548 -19.84502,-5.47466 -21.00972,8.8064 -7.3695,-4.26988 -15.07382,7.2768 -26.38922,5.39412 -7.52032,23.22402 42.46864,71.171743 33.04314,69.958943 -5.14974,-18.69226 -5.11786,-89.571203 15.5471,-71.499203 24.07892,43.041603 36.26036,94.217083 28.78384,142.626673 -8.30646,-34.88001 -27.2657,-14.54987 -41.36966,-1.49334 31.02858,-48.50025 -41.86346,-57.78985 -52.54398,-99.79251 -3.29896,-27.021363 -17.0868,-36.902963 -31.8902,-20.344563 -30.77056,-6.33918 12.33408,23.842683 -21.4657,12.47788 -21.04816,19.745063 23.05162,46.604803 48.83104,73.400523 37.58052,32.74188 -29.10886,75.29975 -15.74374,117.68588 0.33014,61.82666 -15.04064,124.00051 -0.016,185.45759 5.63152,31.896 9.26954,102.49867 20.41978,106.24963 -2.96122,-43.80908 4.39244,-86.81656 18.31126,-127.52217 -12.03076,-59.43092 10.12748,-122.39625 47.2816,-168.50559 -14.86118,58.784 -36.16186,116.74027 -36.56064,177.98933 -12.13994,47.02935 -27.61008,97.03309 -17.6376,145.54081 6.0984,-51.01386 12.48138,-106.75947 36.21996,-155.11361 24.17246,-57.66718 28.2659,-120.81171 31.78132,-182.37866 20.38784,-8.58506 58.55156,6.45173 19.99894,-15.78294 15.76804,-23.13814 38.7608,-44.58772 42.75902,-75.79679 22.21516,-11.87146 26.89682,-35.15734 55.42838,-52.1888 14.26176,-15.92908 53.37788,-62.720003 27.92012,-12.59574 -0.1324,27.75362 -80.10188,57.25068 -17.57628,44.78134 21.61922,0.9744 -28.32128,12.1872 -16.94688,33.29174 -4.24128,23.81065 -5.22586,-53.93388 -14.3,-14.7872 -0.0372,20.82774 -36.72138,42.90611 -8.14534,42.83839 -27.01934,33.04958 -50.06682,69.68961 -78.8448,102.10349 -5.7568,26.89546 2.79094,58.448 -7.40728,86.01223 -12.12706,40.9344 -37.85612,76.44268 -47.43848,118.44109 -11.5705,34.78508 -10.33968,73.8272 -0.21172,108.424 -0.98208,-21.0736 5.00476,-89.78346 11.91628,-30.4864 0.72052,20.69866 28.45582,73.58186 15.53172,25.42026 -14.2623,-44.75518 7.94812,-88.23306 32.29168,-125.14827 18.09948,-20.82134 27.09706,-83.6608 48.74266,-79.52588 -1.08736,35.10774 -29.20458,74.4016 -47.3481,108.34775 -32.77894,38.66134 -25.63232,94.46614 -1.14582,135.31094 -13.67418,-40.35626 -15.73258,-84.0192 6.37062,-122.15786 22.7702,-32.18294 34.44802,-87.30775 82.36438,-89.08057 23.72954,-6.76 68.7744,20.84856 19.50938,11.39574 -46.55068,-2.144 -70.35696,46.95681 -92.59316,78.98617 -28.89388,43.53812 -13.06498,98.62772 23.00292,133.15038 27.45536,37.05814 -0.0896,-42.29866 11.64358,-58.53652 -1.92668,-51.6032 58.4488,-68.6944 97.86372,-44.39734 29.67196,-12.52534 96.36834,-16.74132 100.96252,31.34026 -27.47638,-12.55998 -83.51888,-21.18346 -123.47108,-11.6368 -56.65676,-3.0688 -61.53918,61.67096 -47.89852,100.3584 12.56736,23.05226 -3.82716,-38.1328 10.75754,-51.20372 25.3207,-45.12214 85.0895,-5.89494 122.951,-26.94562 28.4443,-11.05224 51.30666,23.58988 10.4948,21.72908 -38.20964,13.58348 -97.50584,-8.04586 -120.73546,31.31092 -7.17802,32.52 28.75526,-18.53012 49.26626,-0.696 31.06368,9.57282 -52.384,11.23522 -42.72486,34.92374 -4.62282,19.19362 4.03802,48.20374 7.27226,12.26082 15.35232,-18.65706 38.31478,-33.86668 64.91574,-33.44376 29.69066,15.69334 55.43018,-40.07626 69.10662,-14.12586 -7.0559,27.28908 -36.4047,37.27734 -62.1232,33.1712 -24.76524,-2.4512 -55.64088,7.79416 -56.37708,36.74082 0.21708,28.72958 41.41914,50.17172 44.5176,83.00158 22.5095,27.64108 60.1945,49.11628 97.38002,43.5952 z M 441.96933,656.08341 c -20.84846,-35.43734 -19.02244,-82.13546 8.89478,-113.26614 28.96338,-36.34666 80.06352,-48.09653 124.23298,-35.52372 17.77764,9.36106 74.30116,39.7568 61.60794,48.50346 -49.14992,-28.28748 -118.57802,-40.4624 -164.9149,-0.65814 -33.48826,27.36054 -28.12196,73.68746 -22.50392,110.59148 -2.90258,7.7312 -5.61512,-14.96694 -7.31688,-9.64694 z m 242.15714,-39.848 c -13.10708,-41.32372 -34.64572,-79.44162 -69.34844,-107.34242 -31.9616,-29.09493 -52.03392,-74.64745 -100.9203,-79.25867 -33.0365,-3.016 -68.63638,-41.19786 -50.62728,-66.04691 20.00386,30.20745 41.37342,72.84799 85.89814,54.23573 27.1789,-4.80536 51.22022,74.98612 33.66738,19.94238 -1.20668,-23.38078 -27.07192,-39.95092 -26.88698,-64.14451 6.74116,-54.144 56.84462,86.29013 37.12132,20.46185 -19.12032,-25.54079 -18.38224,-89.87519 -1.06234,-99.72693 6.95594,44.11734 -2.79916,92.02347 22.55728,131.76373 30.18788,54.67308 66.6236,106.01227 98.59674,159.77815 -26.03292,-62.512 -66.6958,-118.74827 -89.1129,-182.58881 -10.42268,-24.71039 -26.02914,-59.07893 -17.21858,-81.81173 17.4958,45.18986 20.64854,96.02667 52.83852,134.93865 30.10812,43.33336 51.6087,91.30935 75.56218,137.81869 -26.54016,-62.51948 -52.4377,-125.74135 -88.79558,-183.62135 -4.64136,-36.44905 -31.7969,-81.18453 -23.99828,-111.89439 23.02036,52.66348 50.72304,103.33439 65.70752,158.98453 21.0754,37.20212 38.53786,76.38241 59.65776,113.14881 24.25981,31.8432 -47.96912,35.66452 -63.63616,45.3632 z m 13.98022,-18.93226 c -22.1231,-53.49706 -51.1917,-103.92215 -90.23148,-147.47843 -12.46474,-20.21066 -24.97904,-32.97118 -10.66826,-1.86666 15.70096,48.776 67.98006,74.97921 85.507,123.33121 1.55124,1.97332 24.5929,49.20374 15.39274,26.01388 z M 363.83643,549.72341 c -5.39152,-63.07521 46.14378,-111.85547 54.6741,-172.5472 4.9138,-15.24588 -3.71004,-79.5776 16.82926,-38.70934 12.97734,43.36371 2.65442,90.77439 -23.58234,127.35945 -19.50538,24.44749 -39.936,62.15417 -47.92102,83.89709 z m -57.9691,-98.86455 c -13.1309,-45.71572 10.97556,-88.39465 13.80366,-133.35039 3.1809,-39.72586 -12.75632,-89.08429 22.27996,-118.6384 -16.39562,44.08159 21.29978,85.9088 -1.6343,129.71254 -9.01446,43.9568 -29.91018,85.10933 -27.83104,130.96853 -1.03168,20.73386 -6.9542,-2.32054 -6.61828,-8.69228 z m 52.41262,-14.63732 c 5.96668,-43.52054 12.16768,-88.00427 28.66598,-128.88001 3.88218,46.20694 -10.74816,92.87521 -27.29856,135.76213 l -1.08746,-1.40906 -0.28,-5.47306 0,0 z m 164.92608,-56.22773 c -7.2003,-25.88746 33.08204,4.51305 0,0 z m 17.4317,-10.83894 c -35.31036,-14.77228 -97.888,-3.49492 -88.8616,-62.51626 -9.04764,-44.22401 35.4362,-67.18935 51.92554,-102.59041 8.34062,8.94986 25.79216,-53.07145 33.89302,-22.98347 -25.46198,23.29865 64.6522,-15.51892 21.01268,13.01068 -41.2953,10.74453 -78.12046,45.13277 -76.22374,88.84054 1.74472,16.77866 17.1463,73.04532 12.91052,26.41012 -7.99066,-44.45549 20.14522,-95.32267 68.58122,-102.10827 42.19842,-5.9376 -31.02148,24.08372 -36.91926,36.07146 -21.75406,21.1664 -19.21038,68.62135 -18.22586,87.47521 4.58528,-28.78508 21.04058,-94.78349 53.19872,-82.73761 -21.04422,23.82401 -37.5338,67.65655 -36.45764,91.22935 31.8346,-3.04642 22.0961,-49.10826 32.56638,-70.62933 10.28214,-17.05708 2.85066,43.50293 5.05064,58.59839 -17.41548,8.8752 -6.50124,56.66879 -22.45062,41.9296 z m -61.31062,-36.86772 c -10.38934,-16.42614 -1.65606,-87.16269 -13.95952,-40.7056 0.99856,13.06346 0.91386,35.81866 13.95952,40.7056 z m 190.056,-189.60268 c -15.87444,-2.552 0.88836,-10.15254 -15.10528,-16.40908 20.29226,-2.05598 53.60646,-53.435203 40.69174,-5.42452 0.81232,9.44052 -22.13548,34.60054 -25.58646,21.8336 z m -181.54252,-16.856 c 7.96098,-18.26508 35.58908,-70.432003 59.04776,-64.602143 -12.39308,21.78132 -36.06194,62.889063 -59.04776,64.602143 z M 166.83622,853.92235 c -10.96374,-54.7552 -39.61804,-106.48106 -42.72272,-162.48694 9.44058,-56.79252 16.05866,-115.41386 -1.07112,-171.55306 -2.33204,-45.56429 0.82364,-92.03683 6.30504,-137.45549 23.62628,-50.59945 -10.24422,-88.63785 -43.554686,-124.28426 -16.3928,-29.064 -51.782081,12.94293 -25.42352,23.09069 14.80726,14.04586 29.80732,27.89652 44.720386,41.83572 -3.81216,35.14294 -12.941826,70.06505 -20.566406,104.12799 17.937606,84.96161 7.92388,171.92053 6.04026,257.69867 -1.96916,53.53708 35.735586,99.8688 58.108646,146.78668 5.36278,4.99626 10.46048,24.92426 18.16412,22.24 z m 169.26673,-71.87948 c 32.28698,-34.47946 -31.54246,-37.21546 -37.10144,-74.1456 -38.73002,-54.8704 -52.6006,-121.1968 -59.74442,-186.24958 -9.46104,-76.61657 -33.92104,-155.07308 -9.45666,-231.47256 4.28838,-23.92801 25.16252,-53.84587 -3.82406,-69.27147 -21.84392,-15.66028 -43.59509,-59.44319 -62.17509,-58.93067 -6.38054,14.95574 -37.80806,20.50936 -18.51584,36.37228 30.29238,25.48639 86.14637,49.25811 62.57307,97.4016 -21.14779,66.4864 -15.25025,136.97811 -7.30282,205.02027 19.49702,76.90507 30.21142,156.39947 57.99088,231.07041 21.9032,20.99786 37.58624,72.42132 66.09824,72.76374 4.13866,-7.36426 7.68852,-15.01602 11.45814,-22.55842 z m 33.91862,-79.12692 c 22.17684,-42.30346 -59.12924,-45.84802 -61.75814,-91.5088 -21.10972,-71.63788 -44.1287,-145.11469 -39.67382,-220.49175 -2.40144,-25.65225 -4.92118,-51.14933 3.17748,-76.12427 9.02342,-39.86186 15.32146,-80.62187 29.1686,-119.22774 -20.14416,-22.13758 -48.18646,-77.70984 -73.19104,-72.55306 -14.83888,-2.2464 -14.8592,8.28588 -24.57652,11.8496 9.81598,30.73068 81.33838,48.45868 68.13694,92.13919 -11.42884,46.84323 -30.80766,93.95949 -28.0034,142.55469 11.5393,45.91573 1.77402,93.84747 18.0263,139.8896 0.21172,46.01226 15.03306,89.74988 41.7314,127.5504 16.1793,26.79308 35.1199,58.17334 66.9622,65.92214 z" id="path3087"/>
		</svg>
	</div>
  <p>I represent the width of your device</p>
</div>
              
            
!

CSS

              
                html, body {
  font-family:sans-serif;
  margin:0;
  color:#FFF;
  background:#2B2C2D;
  overflow:hidden;
}

.device {
  width:70%;
  height:700px;
  background-color:#111;
  position:relative;
  text-align:center;
  margin:20px auto;
  font-size: 1.5em;
  display: table;
  border: 1px solid #555;
}

.device p {
  display: table-cell;
  vertical-align: middle;
}

.box {
  cursor:pointer;
  width:100%;
  height:100%;
  position:absolute;
  color:#ccc;
  display:table;
}

.box code {
  font-size: 1.3em;
}

.box svg {
  width:100%;
  height:100%;
  display: block;
  position: relative;
  top: 0;
  left: 0;
}

.red {
  background-color:#833;
}

#slider {
  width:400px;
  margin:10px auto;
}

#sliderText {
  text-align:center;
  margin-top:10px;
}

code {
  font-size:18px;
}

.ui-widget-content {
  background-color:rgba(255, 255, 255, 0.2);
}
              
            
!

JS

              
                TweenLite.defaultEase = Power3.easeInOut;

//responsive timeline animation.
//values recorded once, nothing changes on resize
var tl = new TimelineMax({repeat:-1, yoyo:true, repeatDelay:1}) 
tl.from(".red", 1, {xPercent:-100, force3D:true})
  .to(".red", 1, {xPercent:100}, "+=3");
tl.play(5); //start at 5-seconds in just because it looks better initially (totally subjective).

var $device = $(".device");
//jQueryUI Slider to simulate change in screen size
$("#slider").slider({
  range: false,
  min: 30,
  max: 95,
  step: 0.02,
  value:70,
  slide: function ( event, ui ) {
    $device.css("width", ui.value + "%");
  }
});	
              
            
!
999px

Console