svg animation

by jpeter06

HTML

<div class="menu">
  <div class="cont">
    <svg viewBox="0 0 340 240">
      <path class="start" d="M156.83,30.5c-96,8-131.56,87-107,132,30,55,191,66,229,14C333.6,101.55,261.85,21.74,156.83,30.5Z">          </path>
    </svg>
    <div class="element">
    AAAA
    </div>
  </div>
  <div class="cont">
    <div class="element">
    BBBB
    </div>
    <svg viewBox="0 0 340 240">
      <path class="start2" d="M233.94,35.33C167.28,16.24,37.76,17.4,37.17,111.74c-.33,53.72,110.85,116.57,192.7,100C320.84,193.23,331.8,63.36,233.94,35.33Z"></path>
    </svg>
  </div>
  <div class="cont">
    <div class="element">
    CCCC
    </div>
    <svg viewBox="0 0 340 240">
      <path class="start" d="M156.83,30.5c-96,8-131.56,87-107,132,30,55,191,66,229,14C333.6,101.55,261.85,21.74,156.83,30.5Z">          </path>
    </svg>
  </div>
  <div class="cont">
    <div class="element">
    DDDD
    </div>
    <div class="element" id="elementD">
    DDDD
    </div>
    <svg viewBox="0 0 340 240">
      <path class="start" d="M156.83,30.5c-96,8-131.56,87-107,132,30,55,191,66,229,14C333.6,101.55,261.85,21.74,156.83,30.5Z">          </path>
    </svg>
  </div>

</div>

CSS

html,body{
  width:100%;
  height:100%;
  background:#eee;
  padding:0px;margin:0px;
  font-size:22px;
}
.menu{width:100%;display:flex;flex-direction:row;
/*background:rgba(0,0,0,0.1);*/
padding-top:10px;padding-bottom:10px;
justify-content:center;}
.cont{position:relative;transform-origin: center;
/*will-change: transform;*/
transform: scale(1.01,1.01);
transition: all 0.35s;}
.cont:hover{transform: scale(1.16,1.16);}
.element{padding:20px;z-index:2;position:relative;pointer-events: none;}
svg{position:absolute; left:0px;top:0px;z-index:0;}
svg path {
  transition: all 0.35s ease;
  fill:rgba(0,0,0,0.1);
}
svg:hover path.start {
  d: path("M221.72,27.52C147.48,17,10.19,75.72,39.52,144c25,58.2,108.72,86.39,195.17,59.34C330.76,173.3,328.89,42.74,221.72,27.52Z");
  fill:rgba(200,0,0,0.4);
}

svg:hover path.start2{
  d: path("m254.94,33.33c-57.66,-41.09 -237.18,-7.93 -212.77,121.41c14.67,63.72 82.85,67.57 164.7,51c123.97,-18.51 135.93,-108.38 48.07,-172.41z");
}

#elementD{
  clip-path: circle(0%);
  transition: clip-path 0.55s ease 0.35s;
  position:absolute;left:0px;top:0px;
  color:red;
}
.cont:hover #elementD{clip-path: circle(100%);}