Svg experiments with React Native

SvgExperiments.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';

import Svg, {
    Defs,
    LinearGradient,
    Stop,
    G,
    Path,
    Ellipse,
    Circle
} from 'react-native-svg'

const colors = {
    yellow: '#FFFF00',
    green: '#76FF03',
    red: 'red',
    blue: '#2196F3'
}

const width = 240;
const height = 240;
const r = width / 2;
const offset = width * 0.1;
const startX = width / 2;
const startY = (height / 2) - r;
const centerX = width / 2 + offset / 2;
const centerY = height / 2 + offset / 2;

export default class RainbowCircle extends Component {
    constructor(props) {
        super(props);
        this.state = {
            animationIndex: 0
        }
    }

    describeArc(start, end, radius, largePath, arcSweep) {
        return [
            "M", start.x, start.y,
            "A", r, r, 0, largePath, arcSweep, end.x, end.y
        ].join(" ");
    }

    getCirclePoint(i, steps) {
        var x = (centerX + r * Math.cos(2 * Math.PI * i / steps));
        var y = (centerY + r * Math.sin(2 * Math.PI * i / steps));
        return { x, y }
    }

    getPathArray = (steps, opacity, color) => {
        var pathArray = [];
        var p = this.getCirclePoint(0, steps);
        var op = this.getCirclePoint(0, steps);

        for (let i = 1; i < steps; i++) {
            console.log("looping", i);
            p = this.getCirclePoint(i, steps);
            pathArray.push(<Path strokeOpacity={opacity + ""} d={this.describeArc({ x: op.x, y: op.y }, { x: p.x, y: p.y }, r, 0, 1)}
                fill="none" stroke={color || `url(#linearColors${i})`} strokeWidth="8" />);
            op = p;
        }
        op = this.getCirclePoint(0, steps);
        pathArray.push(<Path strokeOpacity={opacity + ""} d={this.describeArc({ x: p.x, y: p.y }, { x: op.x, y: op.y }, r, 0, 1)}
            fill="none" stroke={color || `url(#linearColors8)`} strokeWidth="8" />);

        return pathArray;
    }

    getPath(step, steps, opacity, color) {
        var p = this.getCirclePoint(step, steps);
        var op = this.getCirclePoint(step + 1, steps);
        return (<Path strokeOpacity={opacity + ""} d={this.describeArc({ x: p.x, y: p.y }, { x: op.x, y: op.y }, r, 0, 1)}
            fill="none" stroke={color || `url(#linearColors${i})`} strokeWidth="8" />)
    }

    getPathInterval(startStep, endStep, steps, opacity, color) {
        var sp = this.getCirclePoint(startStep, steps);
        var ep = this.getCirclePoint(endStep, steps);
        return (<Path strokeOpacity={opacity + ""} d={this.describeArc({ x: sp.x, y: sp.y }, { x: ep.x, y: ep.y }, r, endStep > 32 ? 1 : 0, 1)}
            fill="none" stroke={color || `url(#linearColors${i})`} strokeWidth="8" />)
    }


    getCircle = (opacity,color) => {
        return (
            <Circle
                cx={centerX + ""}
                cy={centerY + ""}
                r={r + ""}
                strokeOpacity={opacity + ""}
                fill="none"
                stroke={color || `url(#linearColors${i})`}
                strokeWidth="8"
            />
        )
    }

    getDots = () => {
        var pathArray = [];
        for (let i = 0; i < steps; i++) {
            console.log("looping", i);
            let p = this.getCirclePoint(i);
            pathArray.push(<Circle cx={p.x + ""} cy={p.y + ""} r="1" stroke="black" strokeWidth="3" fill="red" />);
        }
        return pathArray;
    }



    render() {
        requestAnimationFrame(() => {
            this.setState({ animationIndex: (this.state.animationIndex + 1) > 64 ? 0 : this.state.animationIndex + 1 })
        });
        return (
            <View style={{ alignItems: 'center', justifyContent: 'center' }}>
                <Svg width={width + offset} height={height + offset} style={{ backgroundColor: 'transparent' }}>
                    <Defs>
                        <LinearGradient id="linearColors1" x1="0%" y1="0%" x2="100%" y2="100%">
                            <Stop offset="0" stopColor={colors.red} stopOpacity="1"></Stop>
                            <Stop offset="1" stopColor={colors.red} stopOpacity="1"></Stop>
                        </LinearGradient>
                        <LinearGradient id="linearColors2" x1="50%" y1="0%" x2="50%" y2="100%">
                            <Stop offset="0" stopColor={colors.red} stopOpacity="1"></Stop>
                            <Stop offset="1" stopColor={colors.blue} stopOpacity="1"></Stop>
                        </LinearGradient>
                        <LinearGradient id="linearColors3" x1="100%" y1="100%" x2="0%" y2="0%">
                            <Stop offset="0%" stopColor={colors.blue} stopOpacity="1"></Stop>
                            <Stop offset="100%" stopColor={colors.blue} stopOpacity="1"></Stop>
                        </LinearGradient>
                        <LinearGradient id="linearColors4" x1="50%" y1="100%" x2="50%" y2="0%">
                            <Stop offset="0%" stopColor={colors.blue} stopOpacity="1"></Stop>
                            <Stop offset="100%" stopColor={colors.green} stopOpacity="1"></Stop>
                        </LinearGradient>
                        <LinearGradient id="linearColors5" x1="50%" y1="100%" x2="50%" y2="0%">
                            <Stop offset="0%" stopColor={colors.green} stopOpacity="1"></Stop>
                            <Stop offset="100%" stopColor={colors.green} stopOpacity="1"></Stop>
                        </LinearGradient>
                        <LinearGradient id="linearColors6" x1="50%" y1="100%" x2="50%" y2="0%">
                            <Stop offset="0%" stopColor={colors.green} stopOpacity="1"></Stop>
                            <Stop offset="100%" stopColor={colors.yellow} stopOpacity="1"></Stop>
                        </LinearGradient>
                        <LinearGradient id="linearColors7" x1="50%" y1="100%" x2="50%" y2="0%">
                            <Stop offset="0%" stopColor={colors.yellow} stopOpacity="1"></Stop>
                            <Stop offset="100%" stopColor={colors.yellow} stopOpacity="1"></Stop>
                        </LinearGradient>
                        <LinearGradient id="linearColors8" x1="50%" y1="100%" x2="50%" y2="0%">
                            <Stop offset="0%" stopColor={colors.red} stopOpacity="1"></Stop>
                            <Stop offset="100%" stopColor={colors.yellow} stopOpacity="1"></Stop>
                        </LinearGradient>
                    </Defs>
                    {
                        this.getPathArray(8, 1).map(path => path)
                    }
                    {
                        this.getPathInterval(0, this.state.animationIndex, 64, .5, '#1f2431')
                    }
                    {
                        //this.getDots().map(dot => dot)
                    }
                </Svg>
            </View>

        );
    }
}