<commit_before>import React from "react";
import PropTypes from "prop-types";

const DASH_GAP_FACTOR = 2.7;

class ChluLogo extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.circles = [];
  }

  render() {
    let style = {
      height: this.props.size,
      width: this.props.size,
      overflow: "visible"
      // filter: "drop-shadow(0 0 1px rgba(255,255,255,0.6))"
    }

    return (
      <svg
        onMouseEnter={this.handleMouseOver}
        viewBox="0 0 100 100"
        style={style}
      >
        {this.circle(0, this.props.size, this.props.size / 5)}
        {this.circle(1, this.props.size * 5 / 8, this.props.size / 8 * 4 / 8, true)}
        {this.circle(2, this.props.size * 2 / 8, this.props.size / 8 * 2 / 8)}
      </svg>
    )
  }

  circle(i, r, w, invert) {
    let d = this.defineArc(r, Math.PI * 0.35, Math.PI * 1.65);
    let d2 = this.defineArc(r, Math.PI * 1.65, Math.PI * 0.35);
    let style = invert ? { transform: "rotate(180deg)", transformOrigin: "center center" } : undefined;

    let w2 = w * 3 / 4;

    return (
      <g ref={g => this.circles[i] = g}>
        <path
          style={style}
          x={0}
          y={0}
          fill="transparent"
          stroke={this.props.color}
          strokeWidth={w}
          d={d}
        />
        <path
          style={style}
          x={0}
          y={0}
          fill="transparent"
          stroke={this.props.color}
          strokeWidth={w2}
          strokeDasharray={`${w2} ${w2 * DASH_GAP_FACTOR}`}
          strokeDashoffset={w2 + w2 * DASH_GAP_FACTOR / 2}
          d={d2}
        />
      </g>
    )
  }

  defineArc(radius, startAngle, endAngle) {
    let start = this.cartesianCoordinates(50, 50, radius, endAngle);
    let end = this.cartesianCoordinates(50, 50, radius, startAngle);
    let largeArcFlag = (endAngle - startAngle) < Math.PI ? "0" : "1";

    return [
      "M", start.x, start.y,
      "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
    ].join(" ");
  }

  cartesianCoordinates(centerX, centerY, radius, angle) {
    return {
      x: centerX + (radius * Math.cos(angle)),
      y: centerY + (radius * Math.sin(angle))
    };
  }

  componentDidMount() {
    this.runAnim();
  }

  handleMouseOver = () => {
    this.runAnim();
  }

  runAnim() {
    for (let i = 0; i < this.circles.length; i++) {
      let circle = this.circles[i];
      let keyFrames = [
        { transform: "rotate(360deg)", transformOrigin: "center center" },
        { transform: "rotate(0deg)", transformOrigin: "center center" }
      ];

      if (i % 2 === 1) {
        keyFrames = keyFrames.reverse();
      }

      circle.animate(
        keyFrames,
        {
          duration: 1400,
          easing: "cubic-bezier(0.6,0,0,1)"
        }
      );
    }
  }
}

ChluLogo.defaultProps = {
  size: 60,
  color: "#fff"
};

export default ChluLogo;
<commit_msg>added a few more options<commit_after>import React from "react";
import PropTypes from "prop-types";

const DASH_GAP_FACTOR = 2.7; // Smaller values yield less space between dots.
const ARC_ANGLE = 0.35; // Smaller values yield more solid line, less dots.

class ChluLogo extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.circles = [];
  }

  render() {
    let style = {
      height: this.props.size,
      width: this.props.size,
      overflow: "visible"
      // filter: "drop-shadow(0 0 1px rgba(255,255,255,0.6))"
    }

    return (
      <svg
        onMouseEnter={this.handleMouseOver}
        viewBox="0 0 100 100"
        style={style}
      >
        {this.circle(0, this.props.size, this.props.size / 5, false, true)}
        {this.circle(1, this.props.size * 5 / 8, this.props.size / 8 * 4 / 8, true)}
        {this.circle(2, this.props.size * 2 / 8, this.props.size / 8 * 2 / 8)}
      </svg>
    )
  }

  circle(i, r, w, invert, noDashedArc) {
    let d = this.defineArc(r, Math.PI * ARC_ANGLE, Math.PI * (2 - ARC_ANGLE));
    let d2 = this.defineArc(r, Math.PI * (2 - ARC_ANGLE), Math.PI * ARC_ANGLE);
    let style = invert ? { transform: "rotate(180deg)", transformOrigin: "center center" } : undefined;

    let w2 = w * 3 / 4;

    return (
      <g ref={g => this.circles[i] = g}>
        <path
          style={style}
          x={0}
          y={0}
          fill="transparent"
          stroke={this.props.color}
          strokeWidth={w}
          d={d}
        />
        <path
          opacity={noDashedArc ? 0 : 1}
          style={style}
          x={0}
          y={0}
          fill="transparent"
          stroke={this.props.color}
          strokeWidth={w2}
          strokeDasharray={`${w2} ${w2 * DASH_GAP_FACTOR}`}
          strokeDashoffset={w2 + w2 * DASH_GAP_FACTOR / 2}
          d={d2}
        />
      </g>
    )
  }

  defineArc(radius, startAngle, endAngle) {
    let start = this.cartesianCoordinates(50, 50, radius, endAngle);
    let end = this.cartesianCoordinates(50, 50, radius, startAngle);
    let largeArcFlag = (endAngle - startAngle) < Math.PI ? "0" : "1";

    return [
      "M", start.x, start.y,
      "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
    ].join(" ");
  }

  cartesianCoordinates(centerX, centerY, radius, angle) {
    return {
      x: centerX + (radius * Math.cos(angle)),
      y: centerY + (radius * Math.sin(angle))
    };
  }

  componentDidMount() {
    this.runAnim();
  }

  handleMouseOver = () => {
    this.runAnim();
  }

  runAnim() {
    for (let i = 0; i < this.circles.length; i++) {
      let circle = this.circles[i];
      let keyFrames = [
        { transform: "rotate(360deg)", transformOrigin: "center center" },
        { transform: "rotate(0deg)", transformOrigin: "center center" }
      ];

      if (i % 2 === 1) {
        keyFrames = keyFrames.reverse();
      }

      circle.animate(
        keyFrames,
        {
          duration: 1400,
          easing: "cubic-bezier(0.6,0,0,1)"
        }
      );
    }
  }
}

ChluLogo.defaultProps = {
  size: 60,
  color: "#fff"
};

export default ChluLogo;

{'fraction_non_alphanumeric': 0.1549851924975321, 'fraction_numerical': 0.03142481079302402, 'mean_word_length': 2.0379810094952524, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 19, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1666260', 'n_tokens_mistral': 2275, 'n_tokens_neox': 2118, 'n_words': 470}