title: Simple colour cycling and highlighting in graphviz nodes rendered in SVG
body: <p>I have made some engineering drawings using graphviz. They use a model of risk using the bow-tie approach (popular in some heavy engineering industries). Graphviz can model risk this way really well though they are not strictly graphs.</p>
  <p>My graphviz bow-ties are exported to SVG and I embed them directly in HTML and publish them as static files.</p>
  <p>Some of the graph nodes are called &quot;Threats&quot; in the bow-tie model. I make these Threat nodes hyperlink to other HTML pages dedicaded to these threats.</p>
  <p>I have copies of the same SVG bow-tie at the top of every Threat page, to help the reader (I reproduce it each time rather than link to it.)</p>
  <p>It all works as planned but I would like the pages to be a bit more lively.</p>
  <ol>
  <li>I would like each relevant threat node to &quot;pulse&quot; with colour (maybe cycling from its SVG fill colour to a lighter colour and back again). (One threat per page. The pulsing is to help the reader remember which Threat they are looking at.)</li>
  </ol>
  <p>I can add the static node fill colour in graphviz but I don't know what to do with the SVG or CSS code.</p>
  <ol start="2">
  <li>If possible, can something generic be added to the SVG/CSS so that every node with a hyperlink is highlighted in a user-friendly way when the pointer passes over it, to show that it has a live link to an HTML page?</li>
  </ol>
  <p>Here is the SVG export from graphviz, followed by the (much shorter) graphviz dot code. I don't usually edit the SVG code by hand at all directly so I would like any changes to please be as basic as possible.</p>
  <p>I have made a generic example here to keep the length down but all my risk drawings are identical in concept.</p>
  <pre><code>    &lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; standalone=&quot;no&quot;?&gt;
      &lt;!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.1//EN&quot;
       &quot;http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&quot;&gt;
      &lt;!-- Generated by graphviz version 2.26.3 (20100126.1600)
       --&gt;
      &lt;!-- Title: tiger Pages: 1 --&gt;
      &lt;svg width=&quot;864pt&quot; height=&quot;354pt&quot;
       viewBox=&quot;0.00 0.00 864.00 354.43&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;&gt;
      &lt;g id=&quot;graph1&quot; class=&quot;graph&quot; transform=&quot;scale(0.44582 0.44582) rotate(0) translate(4 791)&quot;&gt;
      &lt;title&gt;tiger&lt;/title&gt;
      &lt;polygon fill=&quot;white&quot; stroke=&quot;white&quot; points=&quot;-4,5 -4,-791 1935,-791 1935,5 -4,5&quot;/&gt;
      &lt;!-- ESCAPED \nTIGER --&gt;
      &lt;g id=&quot;node1&quot; class=&quot;node&quot;&gt;&lt;title&gt;ESCAPED \nTIGER&lt;/title&gt;
      &lt;a xlink:title=&quot;Top Event&quot;&gt;
      &lt;ellipse fill=&quot;crimson&quot; stroke=&quot;crimson&quot; cx=&quot;977&quot; cy=&quot;-372&quot; rx=&quot;148.01&quot; ry=&quot;148.01&quot;/&gt;
      &lt;ellipse fill=&quot;none&quot; stroke=&quot;crimson&quot; cx=&quot;977&quot; cy=&quot;-372&quot; rx=&quot;148.01&quot; ry=&quot;148.01&quot;/&gt;
      &lt;ellipse fill=&quot;none&quot; stroke=&quot;crimson&quot; cx=&quot;977&quot; cy=&quot;-372&quot; rx=&quot;152.01&quot; ry=&quot;152.01&quot;/&gt;
      &lt;text text-anchor=&quot;middle&quot; x=&quot;977&quot; y=&quot;-382&quot; font-family=&quot;Times Roman,serif&quot; font-size=&quot;40.00&quot; fill=&quot;white&quot;&gt;ESCAPED &lt;/text&gt;
      &lt;text text-anchor=&quot;middle&quot; x=&quot;977&quot; y=&quot;-336&quot; font-family=&quot;Times Roman,serif&quot; font-size=&quot;40.00&quot; fill=&quot;white&quot;&gt;TIGER&lt;/text&gt;
      &lt;/a&gt;
      &lt;/g&gt;
      &lt;!-- TIGERPIC --&gt;
      &lt;g id=&quot;node2&quot; class=&quot;node&quot;&gt;&lt;title&gt;TIGERPIC&lt;/title&gt;
      &lt;a xlink:title=&quot;Hazard&quot;&gt;
      &lt;image xlink:href=&quot;tiger.gif&quot; width=&quot;376px&quot; height=&quot;203px&quot; preserveAspectRatio=&quot;xMinYMin meet&quot; x=&quot;789&quot; y=&quot;-202.5&quot;/&gt;
      &lt;polygon fill=&quot;none&quot; stroke=&quot;none&quot; points=&quot;1165,-202.5 789,-202.5 789,0.5 1165,0.5 1165,-202.5&quot;/&gt;
      &lt;/a&gt;
      &lt;/g&gt;
      &lt;!-- ESCAPED \nTIGER&amp;#45;&amp;gt;TIGERPIC --&gt;
      &lt;g id=&quot;edge5&quot; class=&quot;edge&quot;&gt;&lt;title&gt;ESCAPED \nTIGER&amp;#45;&amp;gt;TIGERPIC&lt;/title&gt;
      &lt;path fill=&quot;none&quot; stroke=&quot;black&quot; stroke-width=&quot;10&quot; d=&quot;M977,-219.683C977,-213.821 977,-207.958 977,-202.096&quot;/&gt;
      &lt;/g&gt;
      &lt;!-- SEARCH\nPLAN --&gt;
      &lt;g id=&quot;node14&quot; class=&quot;node&quot;&gt;&lt;title&gt;SEARCH\nPLAN&lt;/title&gt;
      &lt;a xlink:href=&quot;./search.html&quot; xlink:title=&quot;Control&quot;&gt;
      &lt;polygon fill=&quot;darkgreen&quot; stroke=&quot;darkgreen&quot; points=&quot;1318,-437 1202,-437 1202,-369 1318,-369 1318,-437&quot;/&gt;
      &lt;polygon fill=&quot;none&quot; stroke=&quot;darkgreen&quot; points=&quot;1318,-437 1202,-437 1202,-369 1318,-369 1318,-437&quot;/&gt;
      &lt;text text-anchor=&quot;middle&quot; x=&quot;1260&quot; y=&quot;-410.5&quot; font-family=&quot;Times Roman,serif&quot; font-size=&quot;25.00&quot; fill=&quot;white&quot;&gt;SEARCH&lt;/text&gt;
      &lt;text text-anchor=&quot;middle&quot; x=&quot;1260&quot; y=&quot;-380.5&quot; font-family=&quot;Times Roman,serif&quot; font-size=&quot;25.00&quot; fill=&quot;white&quot;&gt;PLAN&lt;/text&gt;
      &lt;/a&gt;
      &lt;/g&gt;
      &lt;!-- ESCAPED \nTIGER&amp;#45;&amp;gt;SEARCH\nPLAN --&gt;
      &lt;g id=&quot;edge15&quot; class=&quot;edge&quot;&gt;&lt;title&gt;ESCAPED \nTIGER&amp;#45;&amp;gt;SEARCH\nPLAN&lt;/title&gt;
      &lt;path fill=&quot;none&quot; stroke=&quot;green&quot; stroke-width=&quot;10&quot; d=&quot;M1128.44,-388.589C1154.59,-391.454 1180.29,-394.269 1201.94,-396.64&quot;/&gt;
      &lt;/g&gt;
      &lt;!-- INSURANCE --&gt;
      &lt;g id=&quot;node16&quot; class=&quot;node&quot;&gt;&lt;title&gt;INSURANCE&lt;/title&gt;
      &lt;a xlink:href=&quot;./insurance.html&quot; xlink:title=&quot;Control&quot;&gt;
      &lt;polygon fill=&quot;darkgreen&quot; stroke=&quot;darkgreen&quot; points=&quot;1513,-354 1355,-354 1355,-316 1513,-316 1513,-354&quot;/&gt;
      &lt;polygon fill=&quot;none&quot; stroke=&quot;darkgreen&quot; points=&quot;1513,-354 1355,-354 1355,-316 1513,-316 1513,-354&quot;/&gt;
      &lt;text text-anchor=&quot;middle&quot; x=&quot;1434&quot; y=&quot;-327.5&quot; font-family=&quot;Times Roman,serif&quot; font-size=&quot;25.00&quot; fill=&quot;white&quot;&gt;INSURANCE&lt;/text&gt;
      &lt;/a&gt;
      &lt;/g&gt;
      &lt;!-- ESCAPED \nTIGER&amp;#45;&amp;gt;INSURANCE --&gt;
      &lt;g id=&quot;edge19&quot; class=&quot;edge&quot;&gt;&lt;title&gt;ESCAPED \nTIGER&amp;#45;&amp;gt;INSURANCE&lt;/title&gt;
      &lt;path fill=&quot;none&quot; stroke=&quot;brown&quot; stroke-width=&quot;10&quot; d=&quot;M1128.54,-359.731C1204.02,-353.62 1292.18,-346.482 1354.34,-341.45&quot;/&gt;
      &lt;/g&gt;
      &lt;!-- GATE\nPASSABLE\n\by\nTIGER --&gt;
      &lt;g id=&quot;node4&quot; class=&quot;node&quot;&gt;&lt;title&gt;GATE\nPASSABLE\n\by\nTIGER&lt;/title&gt;
      &lt;a xlink:title=&quot;Threat&quot;&gt;
      &lt;polygon fill=&quot;red&quot; stroke=&quot;red&quot; points=&quot;202,-743.019 -0.232539,-471.49 404.233,-471.49 202,-743.019&quot;/&gt;
      &lt;polygon fill=&quot;none&quot; stroke=&quot;red&quot; points=&quot;202,-743.019 -0.232539,-471.49 404.233,-471.49 202,-743.019&quot;/&gt;
      &lt;text text-anchor=&quot;middle&quot; x=&quot;202&quot; y=&quot;-599.5&quot; font-family=&quot;Times Roman,serif&quot; font-size=&quot;25.00&quot; fill=&quot;white&quot;&gt;GATE&lt;/text&gt;
      &lt;text text-anchor=&quot;middle&quot; x=&quot;202&quot; y=&quot;-569.5&quot; font-family=&quot;Times Roman,serif&quot; font-size=&quot;25.00&quot; fill=&quot;white&quot;&gt;PASSABLE&lt;/text&gt;
      &lt;text text-anchor=&quot;middle&quot; x=&quot;202&quot; y=&quot;-539.5&quot; font-family=&quot;Times Roman,serif&quot; font-size=&quot;25.00&quot; fill=&quot;white&quot;&gt;by&lt;/text&gt;
      &lt;text text-anchor=&quot;middle&quot; x=&quot;202&quot; y=&quot;-509.5&quot; font-family=&quot;Times Roman,serif&quot; font-size=&quot;25.00&quot; fill=&quot;white&quot;&gt;TIGER&lt;/text&gt;
      &lt;/a&gt;
      &lt;/g&gt;
      &lt;!-- GATE\nDESIGN --&gt;
      &lt;g id=&quot;node11&quot; class=&quot;node&quot;&gt;&lt;title&gt;GATE\nDESIGN&lt;/title&gt;
      &lt;a xlink:href=&quot;./design.html&quot; xlink:title=&quot;Control&quot;&gt;
      &lt;polygon fill=&quot;darkgreen&quot; stroke=&quot;darkgreen&quot; points=&quot;551,-406 441,-406 441,-338 551,-338 551,-406&quot;/&gt;
      &lt;polygon fill=&quot;none&quot; stroke=&quot;darkgreen&quot; points=&quot;551,-406 441,-406 441,-338 551,-338 551,-406&quot;/&gt;
      &lt;text text-anchor=&quot;middle&quot; x=&quot;496&quot; y=&quot;-379.5&quot; font-family=&quot;Times Roman,serif&quot; font-size=&quot;25.00&quot; fill=&quot;white&quot;&gt;GATE&lt;/text&gt;
      &lt;text text-anchor=&quot;middle&quot; x=&quot;496&quot; y=&quot;-349.5&quot; font-family=&quot;Times Roman,serif&quot; font-size=&quot;25.00&quot; fill=&quot;white&quot;&gt;DESIGN&lt;/text&gt;
      &lt;/a&gt;
      &lt;/g&gt;
      &lt;!-- GATE\nPASSABLE\n\by\nTIGER&amp;#45;&amp;gt;GATE\nDESIGN --&gt;
      &lt;g id=&quot;edge7&quot; class=&quot;edge&quot;&gt;&lt;title&gt;GATE\nPASSABLE\n\by\nTIGER&amp;#45;&amp;gt;GATE\nDESIGN&lt;/title&gt;
      &lt;path fill=&quot;none&quot; stroke=&quot;red&quot; stroke-width=&quot;10&quot; d=&quot;M342.112,-471.452C378.198,-448.13 414.84,-424.451 443.311,-406.05&quot;/&gt;
      &lt;/g&gt;
      &lt;!-- KEEPER\nLEAVES\nGATE\nOPEN --&gt;
      &lt;g id=&quot;node5&quot; class=&quot;node&quot;&gt;&lt;title&gt;KEEPER\nLEAVES\nGATE\nOPEN&lt;/title&gt;
      &lt;a xlink:title=&quot;Threat&quot;&gt;
      &lt;polygon fill=&quot;red&quot; stroke=&quot;red&quot; points=&quot;202,-363.019 45.0223,-91.4903 358.978,-91.4903 202,-363.019&quot;/&gt;
      &lt;polygon fill=&quot;none&quot; stroke=&quot;red&quot; points=&quot;202,-363.019 45.0223,-91.4903 358.978,-91.4903 202,-363.019&quot;/&gt;
      &lt;text text-anchor=&quot;middle&quot; x=&quot;202&quot; y=&quot;-219.5&quot; font-family=&quot;Times Roman,serif&quot; font-size=&quot;25.00&quot; fill=&quot;white&quot;&gt;KEEPER&lt;/text&gt;
      &lt;text text-anchor=&quot;middle&quot; x=&quot;202&quot; y=&quot;-189.5&quot; font-family=&quot;Times Roman,serif&quot; font-size=&quot;25.00&quot; fill=&quot;white&quot;&gt;LEAVES&lt;/text&gt;
      &lt;text text-anchor=&quot;middle&quot; x=&quot;202&quot; y=&quot;-159.5&quot; font-family=&quot;Times Roman,serif&quot; font-size=&quot;25.00&quot; fill=&quot;white&quot;&gt;GATE&lt;/text&gt;
      &lt;text text-anchor=&quot;middle&quot; x=&quot;202&quot; y=&quot;-129.5&quot; font-family=&quot;Times Roman,serif&quot; font-size=&quot;25.00&quot; fill=&quot;white&quot;&gt;OPEN&lt;/text&gt;
      &lt;/a&gt;
      &lt;/g&gt;
      &lt;!-- KEEPER\nLEAVES\nGATE\nOPEN&amp;#45;&amp;gt;GATE\nDESIGN --&gt;
      &lt;g id=&quot;edge11&quot; class=&quot;edge&quot;&gt;&lt;title&gt;KEEPER\nLEAVES\nGATE\nOPEN&amp;#45;&amp;gt;GATE\nDESIGN&lt;/title&gt;
      &lt;path fill=&quot;none&quot; stroke=&quot;blue&quot; stroke-width=&quot;10&quot; d=&quot;M278.478,-231.424C330.2,-264.85 397.187,-308.141 443.078,-337.799&quot;/&gt;
      &lt;/g&gt;
      &lt;!-- EATS\nMEMBER\nof\nPUBLIC --&gt;
      &lt;g id=&quot;node7&quot; class=&quot;node&quot;&gt;&lt;title&gt;EATS\nMEMBER\nof\nPUBLIC&lt;/title&gt;
      &lt;a xlink:title=&quot;Consequence&quot;&gt;
      &lt;polygon fill=&quot;red&quot; stroke=&quot;red&quot; points=&quot;1740,-787.019 1566.05,-515.49 1913.95,-515.49 1740,-787.019&quot;/&gt;
      &lt;polygon fill=&quot;none&quot; stroke=&quot;red&quot; points=&quot;1740,-787.019 1566.05,-515.49 1913.95,-515.49 1740,-787.019&quot;/&gt;
      &lt;text text-anchor=&quot;middle&quot; x=&quot;1740&quot; y=&quot;-643.5&quot; font-family=&quot;Times Roman,serif&quot; font-size=&quot;25.00&quot; fill=&quot;white&quot;&gt;EATS&lt;/text&gt;
      &lt;text text-anchor=&quot;middle&quot; x=&quot;1740&quot; y=&quot;-613.5&quot; font-family=&quot;Times Roman,serif&quot; font-size=&quot;25.00&quot; fill=&quot;white&quot;&gt;MEMBER&lt;/text&gt;
      &lt;text text-anchor=&quot;middle&quot; x=&quot;1740&quot; y=&quot;-583.5&quot; font-family=&quot;Times Roman,serif&quot; font-size=&quot;25.00&quot; fill=&quot;white&quot;&gt;of&lt;/text&gt;
      &lt;text text-anchor=&quot;middle&quot; x=&quot;1740&quot; y=&quot;-553.5&quot; font-family=&quot;Times Roman,serif&quot; font-size=&quot;25.00&quot; fill=&quot;white&quot;&gt;PUBLIC&lt;/text&gt;
      &lt;/a&gt;
      &lt;/g&gt;
      &lt;!-- LOSS\nof\nREVENUE --&gt;
      &lt;g id=&quot;node8&quot; class=&quot;node&quot;&gt;&lt;title&gt;LOSS\nof\nREVENUE&lt;/title&gt;
      &lt;a xlink:title=&quot;Consequence&quot;&gt;
      &lt;polygon fill=&quot;red&quot; stroke=&quot;red&quot; points=&quot;1740,-407.593 1551,-199.704 1929,-199.704 1740,-407.593&quot;/&gt;
      &lt;polygon fill=&quot;none&quot; stroke=&quot;red&quot; points=&quot;1740,-407.593 1551,-199.704 1929,-199.704 1740,-407.593&quot;/&gt;
      &lt;text text-anchor=&quot;middle&quot; x=&quot;1740&quot; y=&quot;-291.5&quot; font-family=&quot;Times Roman,serif&quot; font-size=&quot;25.00&quot; fill=&quot;white&quot;&gt;LOSS&lt;/text&gt;
      &lt;text text-anchor=&quot;middle&quot; x=&quot;1740&quot; y=&quot;-261.5&quot; font-family=&quot;Times Roman,serif&quot; font-size=&quot;25.00&quot; fill=&quot;white&quot;&gt;of&lt;/text&gt;
      &lt;text text-anchor=&quot;middle&quot; x=&quot;1740&quot; y=&quot;-231.5&quot; font-family=&quot;Times Roman,serif&quot; font-size=&quot;25.00&quot; fill=&quot;white&quot;&gt;REVENUE&lt;/text&gt;
      &lt;/a&gt;
      &lt;/g&gt;
      &lt;!-- INSPECTION\n\&amp;amp;\nTESTING --&gt;
      &lt;g id=&quot;node12&quot; class=&quot;node&quot;&gt;&lt;title&gt;INSPECTION\n\&amp;amp;\nTESTING&lt;/title&gt;
      &lt;a xlink:href=&quot;./inspection.html&quot; xlink:title=&quot;Control&quot;&gt;
      &lt;polygon fill=&quot;darkgreen&quot; stroke=&quot;darkgreen&quot; points=&quot;752,-464 588,-464 588,-366 752,-366 752,-464&quot;/&gt;
      &lt;polygon fill=&quot;none&quot; stroke=&quot;darkgreen&quot; points=&quot;752,-464 588,-464 588,-366 752,-366 752,-464&quot;/&gt;
      &lt;text text-anchor=&quot;middle&quot; x=&quot;670&quot; y=&quot;-437.5&quot; font-family=&quot;Times Roman,serif&quot; font-size=&quot;25.00&quot; fill=&quot;white&quot;&gt;INSPECTION&lt;/text&gt;
      &lt;text text-anchor=&quot;middle&quot; x=&quot;670&quot; y=&quot;-407.5&quot; font-family=&quot;Times Roman,serif&quot; font-size=&quot;25.00&quot; fill=&quot;white&quot;&gt;&amp;amp;&lt;/text&gt;
      &lt;text text-anchor=&quot;middle&quot; x=&quot;670&quot; y=&quot;-377.5&quot; font-family=&quot;Times Roman,serif&quot; font-size=&quot;25.00&quot; fill=&quot;white&quot;&gt;TESTING&lt;/text&gt;
      &lt;/a&gt;
      &lt;/g&gt;
      &lt;!-- GATE\nDESIGN&amp;#45;&amp;gt;INSPECTION\n\&amp;amp;\nTESTING --&gt;
      &lt;g id=&quot;edge8&quot; class=&quot;edge&quot;&gt;&lt;title&gt;GATE\nDESIGN&amp;#45;&amp;gt;INSPECTION\n\&amp;amp;\nTESTING&lt;/title&gt;
      &lt;path fill=&quot;none&quot; stroke=&quot;red&quot; stroke-width=&quot;10&quot; d=&quot;M551.533,-385.724C563.07,-388.575 575.46,-391.637 587.725,-394.668&quot;/&gt;
      &lt;/g&gt;
      &lt;!-- TRAINING --&gt;
      &lt;g id=&quot;node13&quot; class=&quot;node&quot;&gt;&lt;title&gt;TRAINING&lt;/title&gt;
      &lt;a xlink:href=&quot;./training.html&quot; xlink:title=&quot;Control&quot;&gt;
      &lt;polygon fill=&quot;darkgreen&quot; stroke=&quot;darkgreen&quot; points=&quot;737,-348 603,-348 603,-310 737,-310 737,-348&quot;/&gt;
      &lt;polygon fill=&quot;none&quot; stroke=&quot;darkgreen&quot; points=&quot;737,-348 603,-348 603,-310 737,-310 737,-348&quot;/&gt;
      &lt;text text-anchor=&quot;middle&quot; x=&quot;670&quot; y=&quot;-321.5&quot; font-family=&quot;Times Roman,serif&quot; font-size=&quot;25.00&quot; fill=&quot;white&quot;&gt;TRAINING&lt;/text&gt;
      &lt;/a&gt;
      &lt;/g&gt;
      &lt;!-- GATE\nDESIGN&amp;#45;&amp;gt;TRAINING --&gt;
      &lt;g id=&quot;edge12&quot; class=&quot;edge&quot;&gt;&lt;title&gt;GATE\nDESIGN&amp;#45;&amp;gt;TRAINING&lt;/title&gt;
      &lt;path fill=&quot;none&quot; stroke=&quot;blue&quot; stroke-width=&quot;10&quot; d=&quot;M551.533,-358.276C567.844,-354.245 585.861,-349.793 602.817,-345.603&quot;/&gt;
      &lt;/g&gt;
      &lt;!-- INSPECTION\n\&amp;amp;\nTESTING&amp;#45;&amp;gt;ESCAPED \nTIGER --&gt;
      &lt;g id=&quot;edge9&quot; class=&quot;edge&quot;&gt;&lt;title&gt;INSPECTION\n\&amp;amp;\nTESTING&amp;#45;&amp;gt;ESCAPED \nTIGER&lt;/title&gt;
      &lt;path fill=&quot;none&quot; stroke=&quot;red&quot; stroke-width=&quot;10&quot; d=&quot;M752.27,-403.477C775.182,-400.268 800.815,-396.677 826.342,-393.102&quot;/&gt;
      &lt;/g&gt;
      &lt;!-- TRAINING&amp;#45;&amp;gt;ESCAPED \nTIGER --&gt;
      &lt;g id=&quot;edge13&quot; class=&quot;edge&quot;&gt;&lt;title&gt;TRAINING&amp;#45;&amp;gt;ESCAPED \nTIGER&lt;/title&gt;
      &lt;path fill=&quot;none&quot; stroke=&quot;blue&quot; stroke-width=&quot;10&quot; d=&quot;M737.372,-338.437C763.76,-342.132 795.168,-346.532 826.415,-350.908&quot;/&gt;
      &lt;/g&gt;
      &lt;!-- DART\nGUN --&gt;
      &lt;g id=&quot;node15&quot; class=&quot;node&quot;&gt;&lt;title&gt;DART\nGUN&lt;/title&gt;
      &lt;a xlink:href=&quot;./dartgun.html&quot; xlink:title=&quot;Control&quot;&gt;
      &lt;polygon fill=&quot;darkgreen&quot; stroke=&quot;darkgreen&quot; points=&quot;1475,-573 1393,-573 1393,-505 1475,-505 1475,-573&quot;/&gt;
      &lt;polygon fill=&quot;none&quot; stroke=&quot;darkgreen&quot; points=&quot;1475,-573 1393,-573 1393,-505 1475,-505 1475,-573&quot;/&gt;
      &lt;text text-anchor=&quot;middle&quot; x=&quot;1434&quot; y=&quot;-546.5&quot; font-family=&quot;Times Roman,serif&quot; font-size=&quot;25.00&quot; fill=&quot;white&quot;&gt;DART&lt;/text&gt;
      &lt;text text-anchor=&quot;middle&quot; x=&quot;1434&quot; y=&quot;-516.5&quot; font-family=&quot;Times Roman,serif&quot; font-size=&quot;25.00&quot; fill=&quot;white&quot;&gt;GUN&lt;/text&gt;
      &lt;/a&gt;
      &lt;/g&gt;
      &lt;!-- SEARCH\nPLAN&amp;#45;&amp;gt;DART\nGUN --&gt;
      &lt;g id=&quot;edge16&quot; class=&quot;edge&quot;&gt;&lt;title&gt;SEARCH\nPLAN&amp;#45;&amp;gt;DART\nGUN&lt;/title&gt;
      &lt;path fill=&quot;none&quot; stroke=&quot;green&quot; stroke-width=&quot;10&quot; d=&quot;M1303.91,-437.319C1331.19,-458.643 1366.04,-485.88 1392.8,-506.797&quot;/&gt;
      &lt;/g&gt;
      &lt;!-- DART\nGUN&amp;#45;&amp;gt;EATS\nMEMBER\nof\nPUBLIC --&gt;
      &lt;g id=&quot;edge17&quot; class=&quot;edge&quot;&gt;&lt;title&gt;DART\nGUN&amp;#45;&amp;gt;EATS\nMEMBER\nof\nPUBLIC&lt;/title&gt;
      &lt;path fill=&quot;none&quot; stroke=&quot;green&quot; stroke-width=&quot;10&quot; d=&quot;M1475.27,-548.036C1508.79,-555.376 1558.05,-566.162 1605.02,-576.445&quot;/&gt;
      &lt;/g&gt;
      &lt;!-- INSURANCE&amp;#45;&amp;gt;LOSS\nof\nREVENUE --&gt;
      &lt;g id=&quot;edge20&quot; class=&quot;edge&quot;&gt;&lt;title&gt;INSURANCE&amp;#45;&amp;gt;LOSS\nof\nREVENUE&lt;/title&gt;
      &lt;path fill=&quot;none&quot; stroke=&quot;brown&quot; stroke-width=&quot;10&quot; d=&quot;M1513.6,-317.832C1550.43,-309.887 1594.7,-300.338 1634.29,-291.8&quot;/&gt;
      &lt;/g&gt;
      &lt;/g&gt;
      &lt;/svg&gt;
  </code></pre>
  <p>This is graphviz dot code for the bow-ties:</p>
  <pre><code>digraph tiger {
  
      overlap=scale;
      splines=true;
      // clusters=dotted;
      ordering=out;
      size=&quot;12,12!&quot;
      
      bgcolor=white;
      rankdir=LR;
      
      root=&quot;ESCAPED \nTIGER&quot; // for twopi and circo
      
      // Middle nodes
      
      &quot;ESCAPED \nTIGER&quot; [tooltip=&quot;Top Event&quot;, fontsize=40, width=2, height=2, shape=doublecircle, style=filled, color=crimson, fontcolor=white];
      
      &quot;TIGERPIC&quot; [label=&quot;&quot;, image=&quot;tiger.gif&quot;, tooltip=&quot;Hazard&quot;, fontsize=40, width=2, height=2, shape=rectangle, color=none];
      
      // Lining up!
      
      {rank=same; &quot;GATE\nPASSABLE\n\by\nTIGER&quot; &quot;KEEPER\nLEAVES\nGATE\nOPEN&quot;}
      
      {rank=same; &quot;EATS\nMEMBER\nof\nPUBLIC&quot; &quot;LOSS\nof\nREVENUE&quot;}
      
      {rank=same; &quot;ESCAPED \nTIGER&quot; &quot;TIGERPIC&quot;}
      
      // Top Event and Risk!
      
      
      &quot;ESCAPED \nTIGER&quot; -&gt; &quot;TIGERPIC&quot; [arrowhead = none, penwidth=10];
      
      // Threats and consequences
      
      &quot;GATE\nPASSABLE\n\by\nTIGER&quot; [tooltip=&quot;Threat&quot;, color=red, shape=triangle, style=filled, fontcolor=white, fontsize=25];
      &quot;KEEPER\nLEAVES\nGATE\nOPEN&quot;  [tooltip=&quot;Threat&quot;, color=red, shape=triangle, style=filled, fontcolor=white, fontsize=25];
      &quot;EATS\nMEMBER\nof\nPUBLIC&quot;  [tooltip=&quot;Consequence&quot;, color=red, shape=triangle, style=filled, fontcolor=white, fontsize=25];
      &quot;LOSS\nof\nREVENUE&quot;  [tooltip=&quot;Consequence&quot;, color=red, shape=triangle, style=filled, fontcolor=white, fontsize=25];
      
      // Controls!
      
      &quot;GATE\nDESIGN&quot; [URL=&quot;./design.html&quot;, tooltip=&quot;Control&quot;, shape=box, style=filled, color=darkgreen, fontcolor=white, fontsize=25];
      &quot;INSPECTION\n\&amp;\nTESTING&quot; [URL=&quot;./inspection.html&quot;, tooltip=&quot;Control&quot;, shape=box, style=filled, color=darkgreen, fontcolor=white, fontsize=25];
      &quot;TRAINING&quot; [URL=&quot;./training.html&quot;, tooltip=&quot;Control&quot;, shape=box, style=filled, color=darkgreen, fontcolor=white, fontsize=25];
      &quot;SEARCH\nPLAN&quot; [URL=&quot;./search.html&quot;, tooltip=&quot;Control&quot;, shape=box, style=filled, color=darkgreen, fontcolor=white, fontsize=25];
      &quot;DART\nGUN&quot; [URL=&quot;./dartgun.html&quot;, tooltip=&quot;Control&quot;, shape=box, style=filled, color=darkgreen, fontcolor=white, fontsize=25];
      &quot;INSURANCE&quot; [URL=&quot;./insurance.html&quot;, tooltip=&quot;Control&quot;, shape=box, style=filled, color=darkgreen, fontcolor=white, fontsize=25];
      
      // Joining up 
      
      &quot;GATE\nPASSABLE\n\by\nTIGER&quot; -&gt; &quot;GATE\nDESIGN&quot; -&gt; &quot;INSPECTION\n\&amp;\nTESTING&quot; -&gt; &quot;ESCAPED \nTIGER&quot; [arrowhead = none, penwidth=10, color=red];
      &quot;KEEPER\nLEAVES\nGATE\nOPEN&quot; -&gt; &quot;GATE\nDESIGN&quot; -&gt; &quot;TRAINING&quot; -&gt; &quot;ESCAPED \nTIGER&quot; [arrowhead = none, penwidth=10, color=blue];
      &quot;ESCAPED \nTIGER&quot; -&gt; &quot;SEARCH\nPLAN&quot; -&gt; &quot;DART\nGUN&quot; -&gt; &quot;EATS\nMEMBER\nof\nPUBLIC&quot; [arrowhead = none, penwidth=10, color=green];
      &quot;ESCAPED \nTIGER&quot; -&gt; &quot;INSURANCE&quot; -&gt; &quot;LOSS\nof\nREVENUE&quot; [arrowhead = none, penwidth=10, color=brown];
  }
      
  //---------------------
  // ----- The End! -----
  //---------------------
  </code></pre>