Hello I am tried to achieve this image below, where as you increment the score of an attribute the line increases in size depending on the score.
I am at the point where the lines increases in size and decreases in size correctly. However I am finding that as they increase and decrease in size its hard to make them do this around the central point of the circles. Furthermore as I increase the width it adds to both ends of the line rather than just to one side - therefore Im ending up with something like this.
Here the lines can decrease and increase but they are not doing so around a point. Any help would be great. Here is my code so far:
import React from 'react';import {View} from "react-native";import { withAnchorPoint } from 'react-native-anchor-point';interface PersonalityPlotterDialProps { value: number}function PersonalityPlotterDial(props: PersonalityPlotterDialProps) { const {value} = props; const widthCalculator = (value: number) => { switch (value) { case 0: return 0; case 1: return 37.5; case 2: return 62.5; case 3: return 87.5; case 4: return 112.5; case 5: return 137.5; default: return 0; } }; const displayCalculator = () => { if (widthCalculator(value) === 0) { return 'none' } } return (<View style={{alignItems: 'center', justifyContent: 'center', marginTop: 32, marginBottom: 64}}><View style={{ borderColor: '#DBDBDB', borderWidth: 1, height: 275, width: 275, borderRadius: 275 / 2, alignItems: 'center', justifyContent: 'center' }}><View style={{ borderColor: '#DBDBDB', borderWidth: 1, height: 225, width: 225, borderRadius: 225 / 2, alignItems: 'center', justifyContent: 'center' }}><View style={{ borderColor: '#DBDBDB', borderWidth: 1, height: 175, width: 175, borderRadius: 175 / 2, alignItems: 'center', justifyContent: 'center' }}><View style={{ borderColor: '#DBDBDB', borderWidth: 1, height: 125, width: 125, borderRadius: 125 / 2, alignItems: 'center', justifyContent: 'center' }}><View style={{ borderColor: '#DBDBDB', borderWidth: 1, height: 75, width: 75, borderRadius: 75 / 2, alignItems: 'center', justifyContent: 'center' }}><View style={{position: 'absolute', justifyContent: 'center', alignItems: 'center'}}><View style={{ borderColor: '#DBDBDB', borderWidth: 1, width: 275, alignItems: 'center', justifyContent: 'center', transform: [{ rotate: '45deg'}], position: 'absolute', }} /><View style={{ borderColor: '#DBDBDB', borderWidth: 1, width: 275, alignItems: 'center', justifyContent: 'center', transform: [{ rotate: '90deg'}], position: 'absolute', }} /><View style={{ borderColor: '#DBDBDB', borderWidth: 1, width: 275, alignItems: 'center', justifyContent: 'center', transform: [{ rotate: '135deg'}], position: 'absolute', }} /><View style={{ borderColor: '#DBDBDB', borderWidth: 1, width: 275, alignItems: 'center', justifyContent: 'center', transform: [{ rotate: '180deg'}], position: 'absolute', }} /><View style={{position: 'absolute', justifyContent: 'center', alignItems: 'center'}}><View style={{ backgroundColor: '#000', borderWidth: 3, width: widthCalculator(value), bottom: -3, left: 0, alignItems: 'center', justifyContent: 'center', transform: [{ rotate: '0deg'}], position: 'absolute', display: displayCalculator(), }} /><View style={{ backgroundColor: '#000', borderWidth: 3, width: widthCalculator(value), bottom: -52, right: -116, alignItems: 'center', justifyContent: 'center', transform: [{ rotate: '45deg'}], position: 'absolute', display: displayCalculator(), }} /><View style={{ backgroundColor: '#000', borderWidth: 3, width: widthCalculator(value), alignItems: 'center', justifyContent: 'center', bottom: -72, left: -70, transform: [{ rotate: '90deg'}], position: 'absolute', display: displayCalculator(), }} /><View style={{ backgroundColor: '#000', borderWidth: 3, width: widthCalculator(value), alignItems: 'center', justifyContent: 'center', bottom: -50, right: -19, transform: [{ rotate: '135deg'}], position: 'absolute', display: displayCalculator(), }} /><View style={{ backgroundColor: '#000', borderWidth: 3, width: widthCalculator(value), alignItems: 'center', justifyContent: 'center', bottom: -3, right: 0, transform: [{ rotate: '180deg'}], position: 'absolute', display: displayCalculator(), }} /><View style={{ backgroundColor: '#000', borderWidth: 3, width: widthCalculator(value), alignItems: 'center', justifyContent: 'center', transform: [{ rotate: '225deg'}, {translateX: 68}], position: 'absolute', display: displayCalculator(), }} /><View style={{ backgroundColor: '#000', borderWidth: 3, width: widthCalculator(value), alignItems: 'center', justifyContent: 'center', bottom: 67, right: -67, transform: [{ rotate: '270deg'}], position: 'absolute', display: displayCalculator(), }} /><View style={{ backgroundColor: '#000', borderWidth: 3, width: widthCalculator(value), alignItems: 'center', justifyContent: 'center', bottom: 46, right: -116, transform: [{ rotate: '315deg'}], position: 'absolute', display: displayCalculator(), }} /></View></View></View></View></View></View></View></View> );}export default PersonalityPlotterDial;Please let me know if im missing anything as I think it may be some way of doing it with transformations around a point - any help even pointing me in the right direction would be great!