Skip to content

Instantly share code, notes, and snippets.

@matthewcopeland
Created October 22, 2012 22:07
Show Gist options
  • Save matthewcopeland/3934901 to your computer and use it in GitHub Desktop.
Save matthewcopeland/3934901 to your computer and use it in GitHub Desktop.
WIP - svg spike for rose chart.
<h1>SVG Spike</h1>
<% # rose chart trig
rose_chart_size = 500
# faux variables
dist1 = 100/2
dist2 = 200/2
dist3 = 300/2
dist4 = 400/2
dist5 = 500/2
rose_petal_count = 5
leg_distance = dist3
slice_angle = 360/rose_petal_count
theta_angle = 90 - (slice_angle/2)
altitude = leg_distance * Math.sin(theta_angle)
base = -(leg_distance * Math.cos(theta_angle))
hbase = base/2
startpoint_x = rose_chart_size/2
startpoint_y = rose_chart_size/2
x1 = startpoint_x - hbase
x2 = startpoint_x + hbase
y = startpoint_y - leg_distance
# svg syntax helpers
startpoint = "#{startpoint_x},#{startpoint_y}"
access_rotation = 0
large_arc_false = 0
sweep_flag_positive = 1
%>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="rose-chart">
<% 5.times do |i| %>
<path class="rose-petal" d="
M<%= startpoint %>
L<%= x1 %>,<%= y %>
A<%= base %>, <%= altitude %>
<%= access_rotation %>
<%= large_arc_false %>, <%= sweep_flag_positive %>
<%= x2 %>,<%= y %>
z"transform="rotate(<%= slice_angle*i %> <%= startpoint_x %> <%= startpoint_y %>)" />
<%end%>
</svg>
svg {
fill: rgba($blackblue, .7);
stroke:pink;
stroke-width: 0;
fill-opacity:1;
stroke-opacity:0.9;
stroke-linecap: round;
}
$rose-chart-size: 500px;
#rose-chart {
height: $rose-chart-size;
width: $rose-chart-size;
@include box-shadow( 0 2px 20px 0 rgba(0,0,0, .8) );
overflow: hidden;
}
.rose-petal {
fill: rgba($darkgreen, .7);
&:nth-of-type(2) { fill: rgba($lightpink, .7); }
&:nth-of-type(3) { fill: rgba($blackblue, .7); }
&:nth-of-type(4) { fill: rgba($maroon, .7); }
&:nth-of-type(5) { fill: rgba($darkpurple, .7); }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment