Skip to content

Instantly share code, notes, and snippets.

@chandeeland
Created June 11, 2015 14:12
Show Gist options
  • Save chandeeland/0154709d18a0b38b498b to your computer and use it in GitHub Desktop.
Save chandeeland/0154709d18a0b38b498b to your computer and use it in GitHub Desktop.
Time to make the donuts
#!/usr/bin/env ruby
percentage = ARGV[0].to_i
if percentage >= 75
stroke_color = '#00a651'
elsif percentage >= 50
stroke_color = '#fff200'
elsif percentage >= 25
stroke_color = '#ef9d26'
else
stroke_color = '#f00'
end
size = 100
dash_array = 100 * 0.9 * Math::PI
dash_off = (((100 - percentage) / 100.0) * dash_array)
dash_on = dash_array - dash_off
center = size / 2
# puts percentage
# puts center
# puts 100 - percentage
# puts (100 - percentage) / 100.0
# puts ((100 - percentage) / 100.0) * dash_array
# foo << "/* #{dash_array} #{dash_offset} #{percentage}*/"
# <circle stroke-dasharray="282.7433388230814" stroke="#EEE" r="45%" cy="50%" cx="50%" stroke-width="10%" fill="none" class="background"></circle>'
puts %Q(
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
height="#{size}"
width="#{size}">
<g>
<title></title>
<circle
stroke-dasharray="#{dash_array}"
stroke="#EEE"
r="45%" cy="#{center}" cx="#{center}"
stroke-width="10%"
fill="none"
class="background"></circle>
<circle
stroke-dasharray="#{dash_on}, #{dash_off}"
stroke="#{stroke_color}"
r="45%" cy="#{center}" cx="#{center}"
stroke-width="10%"
fill="none"
class="percentage"
transform="rotate(-90, #{center}, #{center})"></circle>
<text
x="#{center}"
y="#{center}"
text-anchor="middle"
stroke="#000"
font-family="Helvetica"
font-size="15px"
class="donut-title"
>#{percentage}%
</text>
</g>
</svg>
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment