style svg height 200px the contents will scale to fit because of viewBox border 1px solid gray style svg viewBox 1 1 2 2 style transform rotate 90deg svg script const svgEl document querySelector svg const slices percent 0 2 color Coral percent 0 5 color CornflowerBlue percent 0 3 color 00ab6b let cumulativePercent 0 function getCoordinatesForPercent percent const x Math cos 2 Math PI percent const y Math sin 2 Math PI percent return x y slices forEach slice destructuring assignment sets the two variables at once const startX startY getCoordinatesForPercent cumulativePercent each slice starts where the last slice ended so keep a cumulative percent cumulativePercent slice percent const endX endY getCoordinatesForPercent cumulativePercent if the slice is more than 50 take the large arc the long way around const largeArcFlag slice percent 5 1 0 create an array and join it just for code readability const pathData M startX startY Move A 1 1 0 largeArcFlag 1 endX endY Arc L 0 0 Line join create a path and append it to the svg element const pathEl document createElementNS http www w3 org 2000 svg path pathEl setAttribute d pathData pathEl setAttribute fill slice color svgEl appendChild pathEl script Add patterns backgrounds to paths simple minimal working example svg xmlns http www w3 org 2000 svg xmlns xlink http www w3 org 1999 xlink width 483px height 255px defs pattern id img1 patternUnits userSpaceOnUse width 600 height 450 image xlink href https notebook xbdev net var images test512 png x 0 y 0 width 600 height 450 pattern defs path d M 0 000 0 001 L483 001 1 873 L266 099 254 997 L 0 000 254 997 L 0 000 0 001 Z fill url img1 svg Put images mask images onto the pie segments style svg height 200px the contents will scale to fit because of viewBox border 1px solid gray style svg viewBox 1 1 2 2 style transform rotate 90deg defs pattern id img1 patternUnits userSpaceOnUse width 1 height 1 image xlink href https notebook xbdev net var images test512 png x 0 y 0 width 1 height 1 pattern defs svg script const svgEl document querySelector svg const slices percent 0 2 color Coral percent 0 5 color CornflowerBlue percent 0 3 color 00ab6b let cumulativePercent 0 function getCoordinatesForPercent percent const x Math cos 2 Math PI percent const y Math sin 2 Math PI percent return x y slices forEach slice i destructuring assignment sets the two variables at once const startX startY getCoordinatesForPercent cumulativePercent each slice starts where the last slice ended so keep a cumulative percent cumulativePercent slice percent const endX endY getCoordinatesForPercent cumulativePercent if the slice is more than 50 take the large arc the long way around const largeArcFlag slice percent 5 1 0 create an array and join it just for code readability const pathData M startX startY Move A 1 1 0 largeArcFlag 1 endX endY Arc L 0 0 Line join create a path and append it to the svg element const pathEl document createElementNS http www w3 org 2000 svg path pathEl setAttribute d pathData pathEl setAttribute fill slice color if i 0 pathEl setAttribute fill url img1 svgEl appendChild pathEl script Use a mask if you want to hack in a hole donut style svg height 200px the contents will scale to fit because of viewBox border 1px solid gray style svg viewBox 1 1 2 2 style transform rotate 90deg defs pattern id img1 patternUnits userSpaceOnUse width 1 height 1 image xlink href https notebook xbdev net var images test512 png x 0 y 0 width 1 height 1 pattern mask id circlemask rect fill white x 1 y 1 width 100 height 100 circle r 0 4 cx 0 cy 0 fill black mask defs g id gg mask url circlemask g svg script const svgEl document getElementById gg document querySelector g const slices percent 0 2 color Coral percent 0 5 color CornflowerBlue percent 0 3 color 00ab6b let cumulativePercent 0 function getCoordinatesForPercent percent const x Math cos 2 Math PI percent const y Math sin 2 Math PI percent return x y slices forEach slice i destructuring assignment sets the two variables at once const startX startY getCoordinatesForPercent cumulativePercent each slice starts where the last slice ended so keep a cumulative percent cumulativePercent slice percent const endX endY getCoordinatesForPercent cumulativePercent if the slice is more than 50 take the large arc the long way around const largeArcFlag slice percent 5 1 0 create an array and join it just for code readability const pathData M startX startY Move A 1 1 0 largeArcFlag 1 endX endY Arc L 0 0 Line join create a path and append it to the svg element const pathEl document createElementNS http www w3 org 2000 svg path pathEl setAttribute d pathData pathEl setAttribute fill slice color if i 0 pathEl setAttribute fill url img1 svgEl appendChild pathEl console log ready script
const startX startY getCoordinatesForPercent cumulativePercent each slice starts where the last slice ended so keep a cumulative percent cumulativePercent slice percent const endX endY getCoordinatesForPercent cumulativePercent if the slice is more than 50 take the large arc the long way around const largeArcFlag slice percent 5 1 0 create an array and join it just for code readability const pathData M startX startY Move A 1 1 0 largeArcFlag 1 endX endY Arc L 0 0 Line join create a path and append it to the svg element const pathEl document createElementNS http www w3 org 2000 svg path pathEl setAttribute d pathData pathEl setAttribute fill slice color if i 0 pathEl setAttribute fill url img1 svgEl appendChild pathEl script Use a mask if you want to hack in a hole donut style svg height 200px the contents will scale to fit because of viewBox border 1px solid gray style svg viewBox 1 1 2 2 style transform rotate 90deg defs pattern id img1 patternUnits userSpaceOnUse width 1 height 1 image xlink href https notebook xbdev net var images test512 png x 0 y 0 width 1 height 1 pattern mask id circlemask rect fill white x 1 y 1 width 100 height 100 circle r 0 4 cx 0 cy 0 fill black mask defs g id gg mask url circlemask g svg script const svgEl document getElementById gg document querySelector g const slices percent 0 2 color Coral percent 0 5 color CornflowerBlue percent 0 3 color 00ab6b let cumulativePercent 0 function getCoordinatesForPercent percent const x Math cos 2 Math PI percent const y Math sin 2 Math PI percent return x y slices forEach slice i destructuring assignment sets the two variables at once const startX startY getCoordinatesForPercent cumulativePercent each slice starts where the last slice ended so keep a cumulative percent cumulativePercent slice percent const endX endY getCoordinatesForPercent cumulativePercent if the slice is more than 50 take the large arc the long way around const largeArcFlag slice percent 5 1 0 create an array and join it just for code readability const pathData M startX startY Move A 1 1 0 largeArcFlag 1 endX endY Arc L 0 0 Line join create a path and append it to the svg element const pathEl document createElementNS http www w3 org 2000 svg path pathEl setAttribute d pathData pathEl setAttribute fill slice color if i 0 pathEl setAttribute fill url img1 svgEl appendChild pathEl console log ready script