Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ 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

Auto Save

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 class="container">
  <?xml version="1.0" encoding="UTF-8"?>
  <svg width="1231px" height="308px" viewBox="0 0 1231 308" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <title>Fill 1</title>
      <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <path d="M77.085411,111.351369 L0,111.351369 C0,90.3425883 4.66859579,71.4330755 14.0061101,54.6260506 C23.3433017,37.8190257 37.4898183,24.5118545 56.4450144,14.7077566 C59.6666167,13.0399331 63.0337897,11.5169977 66.547502,10.132511 C83.7074319,3.37750366 104.350411,0 128.475793,0 L1068.86119,0 C1068.92575,0 1068.9903,0 1069.05486,0 C1092.51403,0.022538156 1114.17213,3.95705624 1134.02916,11.8035543 C1153.94106,19.6693707 1171.07065,30.568179 1185.42438,44.4967594 C1199.77489,58.4285595 1210.95899,74.7429647 1218.97669,93.4464144 C1226.99438,112.146644 1231,132.331173 1231,154 C1231,175.668827 1226.99438,195.853356 1218.97669,214.553586 C1210.95899,233.257035 1199.77489,249.571441 1185.42438,263.500021 C1171.07065,277.431821 1153.94106,288.330629 1134.02916,296.196446 C1114.17213,304.042944 1092.51403,307.977462 1069.05486,308 C1068.9903,308 1068.92575,308 1068.86119,308 L4.63341348,308 L4.63341348,253.373949 C4.63341348,238.105959 7.47672517,224.905039 13.1633486,213.77119 C18.8502947,202.637341 26.3970617,192.971691 35.8046179,184.777462 C45.1514927,176.637968 55.3989056,169.567426 66.547502,163.572277 C66.6198032,163.53042 66.6927501,163.491783 66.7653741,163.453147 C77.9982144,157.432239 89.2310547,151.932929 100.463895,146.961656 C111.696735,141.990383 122.016772,137.122141 131.424328,132.360151 C140.831885,127.59816 148.378974,122.449801 154.065598,116.918294 C159.752221,111.386787 162.595533,104.908677 162.595533,97.483964 C162.595533,88.3817688 159.436226,80.8508049 153.117935,74.9007318 C146.799321,68.9474388 138.023755,65.9691825 126.790915,65.9691825 C115.698481,65.9691825 105.448486,69.3305875 96.0409298,76.0533974 C86.6333736,82.7762074 80.3150825,94.5443446 77.085411,111.351369 Z M1069.05486,73.5194648 C1068.9903,73.5194648 1068.92575,73.516245 1068.86119,73.516245 C1057.74164,73.516245 1047.20309,75.5157014 1037.24876,79.5146143 C1027.29119,83.5135271 1018.5634,89.1255279 1011.06537,96.347397 C1003.56734,103.569266 997.618626,112.08225 993.222452,121.883128 C988.826277,131.687226 986.628189,142.39285 986.628189,154 C986.628189,165.60715 988.826277,176.312774 993.222452,186.113653 C997.618626,195.91775 1003.56734,204.430734 1011.06537,211.652603 C1018.5634,218.874472 1027.29119,224.486473 1037.24876,228.485386 C1047.20309,232.481079 1057.74164,234.480535 1068.86119,234.480535 C1068.92575,234.480535 1068.9903,234.480535 1069.05486,234.480535 C1080.10339,234.457997 1090.57739,232.458541 1100.47363,228.485386 C1110.43119,224.486473 1119.22354,218.874472 1126.85068,211.652603 C1134.48104,204.430734 1140.49109,195.91775 1144.88726,186.113653 C1149.28343,176.312774 1151.48152,165.60715 1151.48152,154 C1151.48152,142.39285 1149.28343,131.687226 1144.88726,121.883128 C1140.49109,112.08225 1134.48104,103.569266 1126.85068,96.347397 C1119.22354,89.1255279 1110.43119,83.5135271 1100.47363,79.5146143 C1090.57739,75.5414593 1080.10339,73.5420029 1069.05486,73.5194648 Z" id="Fill-1" fill="#000000"></path>
      </g>
  </svg>
</div> -->

<div class="container grid-x cell">
  <div class="cell shrink">
        <?xml version="1.0" encoding="UTF-8"?>
        <svg width="270px" height="308px" viewBox="0 0 270 308" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Path</title>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M270,0 L270,308 L4.63341348,308 L4.63341348,253.373949 C4.63341348,238.105959 7.47672517,224.905039 13.1633486,213.77119 C18.8502947,202.637341 26.3970617,192.971691 35.8046179,184.777462 C44.8176758,176.928664 54.6680961,170.073828 65.3564579,164.218729 L66.7653741,163.453147 C77.9982144,157.432239 89.2310547,151.932929 100.463895,146.961656 C111.696735,141.990383 122.016772,137.122141 131.424328,132.360151 C140.831885,127.59816 148.378974,122.449801 154.065598,116.918294 C159.752221,111.386787 162.595533,104.908677 162.595533,97.483964 C162.595533,88.3817688 159.436226,80.8508049 153.117935,74.9007318 C146.799321,68.9474388 138.023755,65.9691825 126.790915,65.9691825 C115.698481,65.9691825 105.448486,69.3305875 96.0409298,76.0533974 C86.6333736,82.7762074 80.3150825,94.5443446 77.085411,111.351369 L0,111.351369 C0,90.3425883 4.66859579,71.4330755 14.0061101,54.6260506 C23.3433017,37.8190257 37.4898183,24.5118545 56.4450144,14.7077566 C59.6666167,13.0399331 63.0337897,11.5169977 66.547502,10.132511 C83.7074319,3.37750366 104.350411,0 128.475793,0 L270,0 Z" id="Path" fill="#000000"></path>
    </g>
</svg>
    </div>
  
  <div class="middle cell auto"></div>
  <div class="cell shrink">
  <?xml version="1.0" encoding="UTF-8"?>
  <svg width="270px" height="308px" viewBox="0 0 270 308" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Shape</title>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M108.054856,0 C131.514033,0.022538156 153.172135,3.95705624 173.02916,11.8035543 C192.941056,19.6693707 210.070646,30.568179 224.424383,44.4967594 C238.774892,58.4285595 249.958994,74.7429647 257.976687,93.4464144 C265.994381,112.146644 270,132.331173 270,154 C270,175.668827 265.994381,195.853356 257.976687,214.553586 C249.958994,233.257035 238.774892,249.571441 224.424383,263.500021 C210.070646,277.431821 192.941056,288.330629 173.02916,296.196446 C153.172135,304.042944 131.514033,307.977462 108.054856,308 L0,308 L0,0 L108.054856,0 Z M107.861192,73.516245 C96.7416449,73.516245 86.2030903,75.5157014 76.2487558,79.5146143 C66.2911936,83.5135271 57.5633984,89.1255279 50.0653702,96.347397 C42.5673419,103.569266 36.6186265,112.08225 32.2224515,121.883128 C27.8262765,131.687226 25.6281891,142.39285 25.6281891,154 C25.6281891,165.60715 27.8262765,176.312774 32.2224515,186.113653 C36.6186265,195.91775 42.5673419,204.430734 50.0653702,211.652603 C57.5633984,218.874472 66.2911936,224.486473 76.2487558,228.485386 C85.9103158,232.363558 96.1222353,234.361193 106.881563,234.475346 L108.054856,234.480535 C119.103392,234.457997 129.577392,232.458541 139.473627,228.485386 C149.43119,224.486473 158.22354,218.874472 165.850677,211.652603 C173.481043,204.430734 179.491085,195.91775 183.88726,186.113653 C188.283435,176.312774 190.481522,165.60715 190.481522,154 C190.481522,142.39285 188.283435,131.687226 183.88726,121.883128 C179.491085,112.08225 173.481043,103.569266 165.850677,96.347397 C158.22354,89.1255279 149.43119,83.5135271 139.473627,79.5146143 C129.868458,75.6583168 119.71901,73.6613254 109.028236,73.5265838 L107.861192,73.516245 Z" id="Shape" fill="#000000"></path>
    </g>
</svg>
  </div>
    
</div>
              
            
!

CSS

              
                $shape-color: #12ac33;

@keyframes size-change {
  0% {
    width: 100%;
  }
  50% {
    width: 60%;
  }
  100% {
    width: 100%;
  }
}

.container{
  background-color: orange;
  // width: 1200px;
  animation-duration: 6s;
  animation-name: size-change;
  animation-iteration-count: infinite;
  svg{
    height: 100%; //How to make the SVGs fill the height??
    g{
      path{
        fill: $shape-color;
      }
    }
  }
  .middle{
    background-color: $shape-color;
    align-self: stretch;
    margin: 3px 0; //This feels hacky
  }
}

body {
  height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  padding: 0 4em;
}
              
            
!

JS

              
                
              
            
!
999px

Console