ravello.rhtml

<%

require './helpers.rb'

size = 500
thickness = 25
right_angle = Math::PI/2

s1 = 50
s0 = (s1 * Math.tan(Math::PI/8)).round(3)
s2 = s1 + 2*s0
s3 = s2 + 2*s0
s4 = s3 + s1

base_chain = [p(s0,s1), p(s3,s1), p(s4,0), p(s3,-s1), p(s0,-s1), p(-s0,-s2), p(-s1,-s2), p(-s2,-s1), p(-s2,-s0)]

base_commands = [' L ', " A #{s1} #{s1} 45 0 1 ", " A #{s1} #{s1} 45 0 1 ", ' L ', ' L ', ' L ', " A #{s2-s1} #{s2-s1} 0 0 0 ", ' L ']

chain = (0...4).map do |step|
  base_chain.zip(base_commands).map { |(p, c)| p.rotate2d(step * right_angle).to2d_s + (c || "") }.join
end.join(' L ')

stroke_dashes = StrokeDash.new(-10,40,43,238,58,44,68,73,58)

page_intro("Ravello Switch Knot")

%>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xml:lang="en" viewBox="<%= -size/2 %> <%= -size/2 %> <%= size %> <%= size %>" id="knot">
  <defs>
    <style>
      /* .bottom { opacity: 0.6; } */
      .top, .bottom { stroke-width: <%= thickness %>px; fill: none; }
      .a { stroke: #AE8ED8; }
      .white { stroke-width: <%= thickness+5 %>px; fill: none; stroke: #fff; }
      .a.top { <%= stroke_dashes.css %> }
      .a.top.white { <%= stroke_dashes.css(2) %> }
    </style>
    <path id="path-a" d="M <%= chain %> Z" />
  </defs>
  <use xlink:href="#path-a" class="a bottom white" />
  <use xlink:href="#path-a" class="a bottom" />
  <use xlink:href="#path-a" class="a top white" />
  <use xlink:href="#path-a" class="a top" />
</svg>