Inflating box

using svg morphing (CSS) to make a box appear to inflate on hover.

by jorgeluis

HTML

<h1>SVG inflating box with CSS (Chrome only?)</h1>

<svg class="box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
  <path class="shape" d="M540 540c-160 1.6-320 1.6-480 0 -1.6-160-1.6-320 0-480 160-1.6 320-1.6 480 0C541.6 220 541.6 380 540 540z"/>
</svg>

CSS

.box .shape {
  fill: #f6f8f9;
  stroke: #acd;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  transition: 0.5s;
 }
 
.box:hover .shape {
  d: path("M540 540c-160 16-320 16-480 0C44 380 44 220 60 60c160-16 320-16 480 0C556 220 556 380 540 540z");
  fill: #fafcfd;
  stroke: #356;
  stroke-width: 6;
}