<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