如何在SVG模式元素中偏移动画？

Question

我在SVG文档中有重复的图案来填充某些几何图形。我想随着时间对图案进行动画处理，但是希望重复形状的不同实例在不同时间进行动画处理。

这是我的svg：

<svg width="1768px" height="1283px" viewBox="0 0 1768 1283">
  <defs>
     <pattern id="diamonds" viewBox="0 0 16 20" width="16px" height="20px" patternUnits="userSpaceOnUse">
       <rect width="16px" height="20px" fill="rgba(30%,30%,30%,1)"></rect>
       <path d="M8 0v20L0 10M16 0v10L8 0M16 10v10H8" fill="rgba(86%,81%,9%,0.03)"></path>
     </pattern>
  </defs>

  <path d="M 0 0 L 607.8977258786044 0 L 560.2905919266584 81.00215987261595 L 129.4125551595978 263.88004884359384 L 0 264.36867738165284 Z" 
    fill="url(#diamonds)" stroke="rgba(86%,81%,9%,1)" stroke-width="2px"></path>
</svg>

我希望每个钻石都慢慢变金，然后逐渐变回灰色，但不是一次全部消失。

（注意：实际上，有许多path元素都填充有模式，因此仅实例化成千上万个SVG元素进行动画处理就很容易实现）。