Skip to content

Wilian-N-Silva/svg-donut-generator

Repository files navigation

SVG Donut chart Generator

License

Deploy

Veja o deploy clicando aqui

Descrição

Este é um pequeno projeto que fiz para tentar entender melhor o SVG e como manipular ele da maneira mais fácil para o desafio de número 08 do #boraCodar

Este projeto foi feito baseado no post do Sergio Pedercini feito no medium onde ele ensina como calcular e montar todo o SVG.

A curiosidade bateu um pouco mais forte e decidi ir além e ver isso funcionando tudo em tempo real!

Calculos realizados (Obrigado Sergio!)

const sqrBox = 36;
const circumference = 100;

// radius = circumference / 2π
const radius = circumference / (Math.PI * 2);

// diameter = radius *2
const diameter = radius * 2;

// x = boxSize /2
const xPos = sqrBox / 2;

// y = boxSize - diameter
const yPos = (sqrBox - diameter) / 2;

Referência