{"size": 2110, "ext": "js", "max_stars_repo_path": "site/_svgs/generators/animations/24/d.js", "max_stars_repo_name": "nisarhassan12/svg-animation-src", "max_stars_repo_stars_event_min_datetime": "2020-03-03T00:13:31.000Z", "max_stars_repo_stars_event_max_datetime": "2021-11-16T11:50:33.000Z", "max_issues_repo_path": "site/_svgs/generators/animations/24/d.js", "max_issues_repo_name": "nisarhassan12/svg-animation-src", "max_issues_repo_issues_event_min_datetime": "2021-06-16T21:29:02.000Z", "max_issues_repo_issues_event_max_datetime": "2021-09-02T07:22:24.000Z", "max_forks_repo_path": "site/_svgs/generators/animations/24/d.js", "max_forks_repo_name": "nisarhassan12/svg-animation-src", "max_forks_repo_forks_event_min_datetime": "2020-03-02T02:51:02.000Z", "max_forks_repo_forks_event_max_datetime": "2022-02-10T15:34:24.000Z"}
{"max_stars_count": 105, "max_issues_count": 2, "max_forks_count": 11, "avg_line_length": 19.9056603774, "max_line_length": 215, "alphanum_fraction": 0.5507109005}
const range = require('lodash/range');

const SVG = require('../../utils/SVG');
const { createPoints } = require('../../utils/Polygon');

module.exports = () => {
  const NUM_NESTED_CIRCLES = 15;
  const RADIUS = 24;
  const DURATION = 20;
  const OFFSET = RADIUS * 0.3;
  const LINE_THICKNESS = 0.2;

  const points = createPoints(4, RADIUS);

  const svg = SVG.svg({
    dataAnimationDuration: `${DURATION}s`,
    viewBox: `-50 -50 100 100`,
  });

  const defs = svg.defs();

  defs
    .clipPath({
      id: 'left-clip',
      transform: `translate(${OFFSET}, 0)`,
    })
    .polygon({
      points,
    });

  defs
    .clipPath({
      id: 'main-clip',
      clipPath: 'url(#left-clip)',
      transform: `translate(-${OFFSET}, 0)`,
    })
    .polygon({
      style: {
        animationDirection: 'reverse',
      },
      points,
    });

  svg.style(`
    polygon {
      stroke: black;
      stroke-width: ${LINE_THICKNESS};
      fill: none;
      animation: main-animation ${DURATION}s linear infinite -${DURATION / 2}s;
    }

    line {
      stroke: black;
      stroke-width: ${LINE_THICKNESS};
    }

    @keyframes main-animation {
      from {
        transform: rotate(0);
      }
      to {
        transform: rotate(-1turn);
      }
    }
  `);

  const intersectionGroup = svg.g({
    clipPath: 'url(#main-clip)',
  });

  const stepSize = LINE_THICKNESS * 5;
  range(Math.floor(100 / stepSize)).forEach(index => {
    const y = stepSize * index - 50;
    intersectionGroup.line({
      x1: -50,
      y1: y,
      x2: 50,
      y2: y,
    });
  });

  svg
    .g({
      transform: `translate(${OFFSET}, 0)`,
    })
    .polygon({
      points,
    });

  svg
    .g({
      transform: `translate(-${OFFSET}, 0)`,
    })
    .polygon({
      style: {
        animationDirection: 'reverse',
      },
      points,
    });

  return svg;
};

module.exports.attribution =
  'Based on [AP15-183](https://www.dailyminimal.com/post/116562808399/ap15-183-a-new-geometric-design-every-day) by [Pierre Voisin](https://www.designbypierre.io/) at [DAILYMINIMAL](https://www.dailyminimal.com/).';
