WIP - svg spike for rose chart.

01_svg_wip.html.erb

<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>

02_svg_wip.scss

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); }
}