填写缺少部分SVG，图像

Question

我有一张图片：

我想填补它的缺失部分。我找到的最好的方法是将图像的缺失部分转换为SVG，然后使用tweenmax开始填充缺失的部分。作为参考，我添加了用于填充svg的动画，但它不像我需要的动画，即它从中心点增加。我需要混合动画，就像图像缺失区域从一端填充。 如果有任何其他方法可以填充图像的缺失部分，我可以改变动画的方式吗？

var controller = new ScrollMagic.Controller();
var tween = new TimelineMax().to(".clip", 1, {
  attr: {
    width: 40
  }
}, "start")

// build scene
var scene = new ScrollMagic.Scene({
  offset: 40
}).setTween(tween).addTo(controller);

.svg_pos,
.pos4 {
  position: fixed;
  top: 0px;
  z-index: 1;
}

.svg_pos {
  left: 53px;
  top: -8px;
}

.dummy-cont {
  position: absolute;
  width: 400px;
  height: 300px;
  background: blue;
  top: 300px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>

<span class="pos4">
  <img src="https://image.ibb.co/mkJDmQ/g.png" />
  <p class="svg_pos">
    <svg x="0px" y="0px"
width="0px" height="29.841px" viewBox="0 0 40.434 29.841" enable-background="new 0 0 40.434 29.841" xml:space="preserve" class="clip">
      <path fill="red" id="word" d="M13.806,0.657c0,0,5.724-0.982,12.366-0.544
c6.671,0.439,14.261,2.298,14.261,2.298L25.056,22.227c0,0-6.318,0.749-12.559,2.531C6.428,26.491,0.436,29.252,0.08,29.761
C-1.22,31.618,13.806,0.657,13.806,0.657z"/>
    </svg>
  </p>
</span>

<div class="dummy-cont"></div>