svg animate attributeName смещение, пауза, возобновление через разные промежутки времени

Question

Мне нужна помощь по приостановке и возобновлению анимации. Есть ли способ сделать паузу attritubeName = "offset" через пару секунд, а затем отменить смещение?

в основном смещение градиента вправо, затем пауза через пару секунд, затем смещение влево ... через несколько интервалов.

Мне удалось отменить значения , используя animate , но нужно было сделать паузу через несколько интервалов. я не уверен, что использование keyTimes решит проблему, потому что существуют длинные паузы с прерывистыми интервалами.

Демо с обратной анимацией градиента SVG можно найти здесь: https://codepen.io/tfss/pen/BbOYmx а также здесь: https://jsfiddle.net/telosantos/vreqL6bd/24/

вот фрагмент градиентной анимации, интервалы которого я бы хотел:

<defs>
  <linearGradient id="userGradient" x1="300%" y1="0" x2="-100%" y2="0" >
    <stop offset="0" stop-color="#ffffff">
          <animate id="white-first" attributeName="offset" values="1;0.9;0;0.9;1" dur="3s" fill="freeze" repeatCount="indefinite" /> 
    </stop>
    <stop id="green" offset="0.5" stop-color="#4caf50" stop-opacity="1">
      <animate attributeName="offset" values="1;0.8;0.9;0;0.9;0.8;1" dur="3s" fill="freeze" repeatCount="indefinite" />
    </stop>
    <stop offset="0" stop-color="#ffffff">
          <animate id="white-last" attributeName="offset" values="1;1;0.5;1;1" dur="3s" fill="freeze" repeatCount="indefinite" /> 
    </stop>
  </linearGradient>
</defs>

<g id="user">
    <circle fill="#f6f7f8" stroke="#607d8b" stroke-width="0.48" stroke-miterlimit="10" cx="30" cy="169.8" r="13"/>
    <path fill="#607d8b" d="M29.7,182.6c-2.7,0-5.5-0.9-7.9-2.6v-2c0-1,0.6-2,1.5-2.5l3.2-1.8c0.4-0.2,0.7-0.7,0.7-1.2v-1.2 c0-0.1,0-0.2-0.1-0.2c-0.6-0.7-1-1.6-1.2-2.5c0-0.1-0.1-0.1-0.1-0.2c-0.3-0.2-0.4-0.5-0.4-0.8v-1.4c0-0.3,0.1-0.5,0.3-0.7 c0.1-0.1,0.1-0.1,0.1-0.2v-1.1c0,0,0,0,0,0c-0.1-0.7,0.2-1.5,0.7-2c0.7-0.8,1.8-1.1,3.3-1.1h0c1.5,0,2.6,0.4,3.3,1.1 c0.5,0.6,0.7,1.3,0.7,2c0,0,0,0,0,0v1.1c0,0.1,0,0.2,0.1,0.2c0.2,0.2,0.3,0.4,0.3,0.7v1.4c0,0.3-0.1,0.6-0.4,0.8 c-0.1,0-0.1,0.1-0.1,0.2c-0.2,0.9-0.6,1.7-1.2,2.5c0,0.1-0.1,0.1-0.1,0.2v1.2c0,0.5,0.3,0.9,0.7,1.2l3.2,1.8 c0.9,0.5,1.5,1.5,1.5,2.5v2C35.2,181.7,32.5,182.6,29.7,182.6L29.7,182.6z"/>
  <path class="circle-outline" fill="url(#userGradient)" d="M30,185.75c-8.822,0-16-7.178-16-16s7.178-16,16-16s16,7.178,16,16
    S38.823,185.75,30,185.75z M30,155.75c-7.72,0-14,6.28-14,14s6.28,14,14,14s14-6.28,14-14S37.72,155.75,30,155.75z"/>
</g>