Skip to content

Instantly share code, notes, and snippets.

@matthewcopeland

matthewcopeland/01_svg_wip.html.erb

Created October 22, 2012 22:07
Download ZIP

Revisions

  1. matthewcopeland revised this gist Oct 23, 2012. 1 changed file with 2 additions and 16 deletions.
    18 changes: 2 additions & 16 deletions 01_svg_wip.html.erb
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    <h1>SVG test</h1>
    <h1>SVG Spike</h1>

    <% # rose chart trig w/o svg translation
    <% # rose chart trig
    rose_chart_size = 500
    # faux variables
    dist1 = 100/2
    @@ -31,20 +31,7 @@ large_arc_false = 0
    sweep_flag_positive = 1
    %>

    <p>startpoint_x: <%= startpoint_x %></p>
    <p>startpoint_y: <%= startpoint_y %></p>
    <p>slice_angle: <%= slice_angle %></p>
    <p>theta_angle: <%= theta_angle %></p>
    <p>leg_distance: <%= leg_distance %></p>
    <p>altitude: <%= altitude %></p>
    <p>hbase: <%= hbase %></p>
    <p>hbase: <%= hbase %></p>
    <p>x1: <%= x1 %></p>
    <p>x2: <%= x2 %></p>
    <p>y: <%= y %></p>

    <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 %>
    @@ -55,5 +42,4 @@ sweep_flag_positive = 1
    <%= x2 %>,<%= y %>
    z"transform="rotate(<%= slice_angle*i %> <%= startpoint_x %> <%= startpoint_y %>)" />
    <%end%>

    </svg>
  2. matthewcopeland revised this gist Oct 23, 2012. 1 changed file with 16 additions and 7 deletions.
    23 changes: 16 additions & 7 deletions 02_svg_wip.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,15 +1,24 @@
    svg {
    box-shadow: 0 2px 20px 0 rgba(0,0,0, .8);
    fill: rgba(darkblue, .7);
    fill: rgba($blackblue, .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); }
    $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); }
    }
  3. matthewcopeland revised this gist Oct 23, 2012. 1 changed file with 48 additions and 41 deletions.
    89 changes: 48 additions & 41 deletions 01_svg_wip.html.erb
    View file
    Original file line number Diff line number Diff line change
    @@ -1,52 +1,59 @@
    <h1>SVG test</h1>
    <%

    <% # rose chart trig w/o svg translation
    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
    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)
    hbase = leg_distance * Math.cos(theta_angle)
    base = (hbase*2)
    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 - altitude
    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
    %>

    <% 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" />
    <p>startpoint_x: <%= startpoint_x %></p>
    <p>startpoint_y: <%= startpoint_y %></p>
    <p>slice_angle: <%= slice_angle %></p>
    <p>theta_angle: <%= theta_angle %></p>
    <p>leg_distance: <%= leg_distance %></p>
    <p>altitude: <%= altitude %></p>
    <p>hbase: <%= hbase %></p>
    <p>hbase: <%= hbase %></p>
    <p>x1: <%= x1 %></p>
    <p>x2: <%= x2 %></p>
    <p>y: <%= y %></p>

    <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>
  4. matthewcopeland revised this gist Oct 22, 2012. 1 changed file with 12 additions and 10 deletions.
    22 changes: 12 additions & 10 deletions 01_svg_wip.html.erb
    View file
    Original file line number Diff line number Diff line change
    @@ -1,21 +1,23 @@
    <h1>SVG test</h1>
    <%
    rose_chart_size = 500
    # faux variables
    dist = 100
    dist1 = 100
    dist2 = 200
    dist3 = 150

    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 = dist3
    leg_distance = dist1
    altitude = leg_distance * Math.sin(theta_angle)
    hbase = leg_distance * Math.cos(theta_angle)
    base = (hbase*2)

    startpoint_x = 275
    startpoint_y = 250
    startpoint_x = rose_chart_size/2
    startpoint_y = rose_chart_size/2
    x1 = startpoint_x + hbase
    x2 = startpoint_x - hbase
    y = startpoint_y - altitude
    @@ -40,11 +42,11 @@ y = startpoint_y - altitude

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

    </svg>
    </svg>
  5. matthewcopeland revised this gist Oct 22, 2012. 1 changed file with 5 additions and 12 deletions.
    17 changes: 5 additions & 12 deletions 01_svg_wip.html.erb
    View file
    Original file line number Diff line number Diff line change
    @@ -21,17 +21,10 @@ x2 = startpoint_x - hbase
    y = startpoint_y - altitude
    %>

    <p><%= startpoint_x %></p>
    <p><%= startpoint_y %></p>
    <p><%= slice_angle %></p>
    <p><%= theta_angle %></p>
    <p><%= leg_distance %></p>
    <p><%= altitude %></p>
    <p><%= hbase %></p>
    <p><%= base %></p>
    <p><%= x1 %></p>
    <p><%= x2 %></p>
    <p><%= y %></p>
    <% 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}" %>

    @@ -54,4 +47,4 @@ y = startpoint_y - altitude
    -<%= dist %>,<%= dist %>
    z" />

    </svg>
    </svg>
  6. matthewcopeland created this gist Oct 22, 2012.
    57 changes: 57 additions & 0 deletions 01_svg_wip.html.erb
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,57 @@
    <h1>SVG test</h1>
    <%
    # faux variables
    dist = 100
    dist2 = 200
    dist3 = 150

    #rose chart slices
    slice_count = 5
    slice_angle = 360/slice_count
    theta_angle = 90 - slice_angle/2
    leg_distance = dist3
    altitude = leg_distance * Math.sin(theta_angle)
    hbase = leg_distance * Math.cos(theta_angle)
    base = (hbase*2)

    startpoint_x = 275
    startpoint_y = 250
    x1 = startpoint_x + hbase
    x2 = startpoint_x - hbase
    y = startpoint_y - altitude
    %>

    <p><%= startpoint_x %></p>
    <p><%= startpoint_y %></p>
    <p><%= slice_angle %></p>
    <p><%= theta_angle %></p>
    <p><%= leg_distance %></p>
    <p><%= altitude %></p>
    <p><%= hbase %></p>
    <p><%= base %></p>
    <p><%= x1 %></p>
    <p><%= x2 %></p>
    <p><%= y %></p>

    <% 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 %>
    v-<%= dist %>
    a<%= dist %>,<%= dist %>
    0
    0,0
    -<%= dist %>,<%= dist %>
    z" />

    </svg>
    15 changes: 15 additions & 0 deletions 02_svg_wip.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    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); }