ravello.html

<title>Ravello Switch Knot</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  * { padding: 0; margin: 0; }
  body { background: #fff; width: 100%; height: 100%; font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif; text-align: center; }
  body, h1 { font-weight: 100; }
  a { opacity: 0.7; }
  #content { position: absolute; bottom: 10px; right: 10px; color: #999; text-align: left; }
  svg { max-height: 100%; max-width: 100%; }
</style>
<div id="content">
<h1>Ravello Switch Knot</h1>
<p>By <a href="http://bernhardhaeussner.de">Bernhard Häussner</a>, May 2016.<br/>Code on <a href="https://github.com/bxt/Nazareth-Knot">GitHub</a>.</p>
</div>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xml:lang="en" viewBox="-250 -250 500 500" id="knot">
  <defs>
    <style>
      /* .bottom { opacity: 0.6; } */
      .top, .bottom { stroke-width: 25px; fill: none; }
      .a { stroke: #AE8ED8; }
      .white { stroke-width: 30px; fill: none; stroke: #fff; }
      .a.top { stroke-dasharray: 40,43,238,58,44,68,73,58; stroke-dashoffset: -10; }
      .a.top.white { stroke-dasharray: 38,45,236,60,42,70,71,60; stroke-dashoffset: -11; }
    </style>
    <path id="path-a" d="M 20.711 50 L 132.844 50 A 50 50 45 0 1 182.844 0 A 50 50 45 0 1 132.844 -50 L 20.711 -50 L -20.711 -91.422 L -50 -91.422 A 41.422 41.422 0 0 0 -91.422 -50 L -91.422 -20.711 L -50 20.711 L -50 132.844 A 50 50 45 0 1 0 182.844 A 50 50 45 0 1 50 132.844 L 50 20.711 L 91.422 -20.711 L 91.422 -50 A 41.422 41.422 0 0 0 50 -91.422 L 20.711 -91.422 L -20.711 -50 L -132.844 -50 A 50 50 45 0 1 -182.844 0 A 50 50 45 0 1 -132.844 50 L -20.711 50 L 20.711 91.422 L 50 91.422 A 41.422 41.422 0 0 0 91.422 50 L 91.422 20.711 L 50 -20.711 L 50 -132.844 A 50 50 45 0 1 0 -182.844 A 50 50 45 0 1 -50 -132.844 L -50 -20.711 L -91.422 20.711 L -91.422 50 A 41.422 41.422 0 0 0 -50 91.422 L -20.711 91.422 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>