WIP - svg spike for rose chart.

01_svg_wip.html.erb

<h1>SVG test</h1>
<%
rose_chart_size = 500
# faux variables
dist1 = 100
dist2 = 200
dist3 = 300
dist4 = 400
dist5 = 500
#rose chart slices
slice_count = 5
slice_angle = 360/slice_count
theta_angle = 90 - slice_angle/2
leg_distance = dist1
altitude = leg_distance * Math.sin(theta_angle)
hbase = leg_distance * Math.cos(theta_angle)
base = (hbase*2)

startpoint_x = rose_chart_size/2
startpoint_y = rose_chart_size/2
x1 = startpoint_x + hbase
x2 = startpoint_x - hbase
y = startpoint_y - altitude
%>

<% data_points = [startpoint_x, startpoint_y, slice_angle, theta_angle, leg_distance, altitude, hbase, base, x1, x2, y] %>
<% data_points.each do |data_point| %>
  <p><%= data_point %></p>
<% end %>

<% startpoint = "#{startpoint_x},#{startpoint_y}" %>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>

  </defs>

  <path class="pie1" id="pieid" d="
    m<%= startpoint %>
    l<%= x1 %>,<%= y %>
    a<%= dist1 %>,<%= dist1 %>
    0
    0,0
    -<%= dist1 %>,<%= dist1 %>
    z" />

</svg>

02_svg_wip.scss

svg {
  box-shadow: 0 2px 20px 0 rgba(0,0,0, .8);
  fill: rgba(darkblue, .7);
  stroke:pink;
  stroke-width: 0;
  fill-opacity:1;
  stroke-opacity:0.9;
  stroke-linecap: round;
}

.pie1 { fill: rgba(limegreen, .7); }
.pie2 { fill: rgba(hotpink, .7); }
.pie3 { fill: rgba(blue, .7); }
.pie4 { fill: rgba(red, .7); }
.pie5 { fill: rgba(purple, .7); }