Here is a fixed version of the ribbon (previous screen had janky edges)…
I just found that I by accident created a famous pattern from the Lissajous Curves subset 
often produced by a double pendulum. Here is an interactive version https://academo.org/demos/lissajous-curves/
There was really some dust on the School Math… either way the results are nice. Corrected formula:
function PerpendicularClockwise( v1, v2) {
var x = v2.x - v1.x;
var y = v2.y - v1.y;
return {x:-y, y:x};
}
function PerpendicularCounterClockwise( v1, v2) {
var x = v2.x - v1.x;
var y = v2.y - v1.y;
return {x:y, y:-x};
}
Demo:
HypeAnimationFrame_CanvasFun_RibbonBlackWhite_FixedUnits.html
Download:
HypeAnimationFrame_CanvasFun_RibbonBlackWhite_FixedUnits.hype.zip
A lost Artist within you 
as always great stuff Max !
Would this work with Physics?
Yes although I am only using the position. The rest is constructed.
Added a download button and testing retina canvas with context.scale(2,2);.
Also made code easier to read.
Demo:
HypeAnimationFrame_CanvasFun_RibbonBlackWhite_FixedUnits_Retina.html
Download:
HypeAnimationFrame_CanvasFun_RibbonBlackWhite_FixedUnits_Retina.hype.zip
ZOING!!!
BTW here is the file for the fixed perpendicular vector. Although I really like the faulty one too, as it has the illusion of a spinning airplane trail.
Download:
HypeAnimationFrame_CanvasFun_Ribbon_fixed.hype.zip