Frame + trace

duolingo-chinese-tooling.js

// Frame with 4 squares （田格本）
function frame() {
  const svg = document.querySelector('._10daI');

  svg.style = 'outline: 4px solid #48BFF8';

  const horizontal = document.createElementNS('http://www.w3.org/2000/svg', 'line');
  horizontal.setAttribute('y1', 54.5);
  horizontal.setAttribute('y2', 54.5);
  horizontal.setAttribute('x1', 0);
  horizontal.setAttribute('x2', 109);
  horizontal.setAttribute('stroke-width', 4);
  horizontal.setAttribute('stroke-dasharray', 4);
  horizontal.setAttribute('stroke-opacity', .5);
  horizontal.setAttribute('stroke', '#48BFF8');

  svg.insertBefore(horizontal, svg.firstChild);


  const vertical = document.createElementNS('http://www.w3.org/2000/svg', 'line');

  vertical.setAttribute('x1', 54.5);
  vertical.setAttribute('x2', 54.5);
  vertical.setAttribute('y1', 0);
  vertical.setAttribute('y2', 109);
  vertical.setAttribute('stroke-width', 4);
  vertical.setAttribute('stroke-dasharray', 4);
  vertical.setAttribute('stroke-opacity', .5);
  vertical.setAttribute('stroke', '#48BFF8');

  svg.insertBefore(vertical, svg.firstChild);
}

// Trace the animation repeatedly 
function trace() {
  const svg = document.querySelector('._10daI');
  const moves = Array.from(svg.querySelectorAll('._1Baci'));

  moves.forEach(path => {
    svg.removeChild(path);
    svg.appendChild(path);
  });

  return moves.length
}

setInterval(() => { 
  const svg = document.querySelector('._10daI');

  if (svg && !svg.style.outline) {
    frame();
  }
}, 1000);