<svg viewBox='-75 -50 150 100'>
  <path class='box'/>
</svg>
$l: 100;

@mixin pdata($s: 1) {
  d: path('M#{-.5*$l}#{-.5*$l}' + 
    'q#{.25*$s*$l} #{.5*$l} 0 #{$l}' + 
    'h#{$l}' + 
    'q#{-.25*$s*$l} #{-.5*$l} 0 #{-$l}')
}

body {
  display: grid;
  place-content: center;
  margin: 0;
  min-height: 100vh
}

svg { width: 80vmin }

.box {
  fill: darkorange;
  @include pdata;
  animation: breathe .5s ease-in-out infinite alternate
}

@keyframes breathe { to { @include pdata(-1) } }
View Compiled
// used to make https://codepen.io/thebabydino/pen/jxpdYj/
View Compiled

External CSS

  1. https://codepen.io/thebabydino/pen/evPbxv.scss

External JavaScript

  1. https://codepen.io/thebabydino/pen/evPbxv.js