<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