content: import React, { Component } from 'react';
  import anime from 'animejs';
  
  /**
   * SVG animated with anime.js
   */
  class CodeAnime extends Component {
    componentDidMount() {
      let el = this.svg; //Get the ref from the component
      // eslint-disable-next-line
      const domNode = anime({
        //Here we put the animation options in a const that we are not to use
        targets: el,
        scale: 1.2,
        rotate: {
          value: 360,
          duration: 1800,
          easing: 'easeInOutSine'
        },
        duration: 1900,
        delay: 250,
        direction: 'alternate',
        loop: true
      });
    }
  
    render() {
      return (
        <div className="SVG box">
          <svg
            className="SVG__svg"
            viewBox="0 0 24 24"
            ref={
              input => {
                this.svg = input;
              } /*Ref of the SVG*/
            }
          >
            <g fillRule="evenodd" className="SVG__logo lines">
              <path
                fill="#7e57c2"
                d="M15.09,12L12,14.08V14.09L8.91,12L12,9.92V9.92L15.09,12M12,2C11.84,2 11.68,2.06 11.53,2.15L2.5,8.11C2.27,8.22 2.09,8.43 2,8.67V14.92C2,15.33 2,15.33 2.15,15.53L11.53,21.86C11.67,21.96 11.84,22 12,22C12.16,22 12.33,21.95 12.47,21.85L21.85,15.5C22,15.33 22,15.33 22,14.92V8.67C21.91,8.42 21.73,8.22 21.5,8.1L12.47,2.15C12.32,2.05 12.16,2 12,2M16.58,13L19.59,15.04L12.83,19.6V15.53L16.58,13M19.69,8.9L16.58,11L12.83,8.47V4.38L19.69,8.9M20.33,10.47V13.53L18.07,12L20.33,10.47M7.42,13L11.17,15.54V19.6L4.41,15.04L7.42,13M4.31,8.9L11.17,4.39V8.5L7.42,11L4.31,8.9M3.67,10.5L5.93,12L3.67,13.54V10.5Z"
              />
            </g>
          </svg>
        </div>
      );
    }
  }
  
  export default CodeAnime;
  