Skip to content

Instantly share code, notes, and snippets.

@gioragutt

gioragutt/Formula.md

Last active April 8, 2021 07:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gioragutt/6ee4a2651b29ec3ff1b8057ed54bb694 to your computer and use it in GitHub Desktop.
Save gioragutt/6ee4a2651b29ec3ff1b8057ed54bb694 to your computer and use it in GitHub Desktop.
Download ZIP
Prep for circle border svg
Raw
Formula.md

Component Parameters

Name Calculation
Radius (RD) input (px)
Stroke (STR) input (px)
Normalized Radius (NRD) RD - STR * 2
Circumference (CIRC) NR * 2 * π
Border Part Percent (BPP) input

Border Part Parameters

Name Calculation
Percent (P) input (0-100)
strokeDashoffset CIRC - (P / 100) * CIRC
strokeDasharray CIRC
strokeWidth STR

Wrapper Svg Props

Name Calculation
height RD * 2
width RD * 2

Circle Props

Name Calculation
stroke input (color)
fill "transparent"
strokeWidth STR
strokeDasharray CIRC
style strokeDashoffset
r NRD
cx RD
cy RD
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment