figs svg

by jpeter06

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.16/svg.min.js"></script>

CSS

html, body{
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  background: #fa4;
 /* background: #fa0;*/
}

svg{
  fill: white;
}

.aspas , .waspas, .gaspas{
  transform-origin: 0 0;
}

.aspas1 .aspas , 
.aspas3 .aspas , 
.aspas4 .aspas
{
   transform-origin: 0 0;
  animation-duration: 3s;
  animation-name: rotAspas;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-timing-function: linear;
}

.waspas0 .waspas, 
.waspas2 .waspas,
.waspas4 .waspas
{
   transform-origin: 0 0;
  animation-duration: 3s;
  animation-name: rotWAspas;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-timing-function: linear;
}

.gaspas1 .gaspas, 
.gaspas3 .gaspas, 
.gaspas5 .gaspas
{
   transform-origin: 0 0;
  animation-duration: 3s;
  animation-name: rotAspas;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-timing-function: linear;
}


/* PATH ****/
.flow {
    fill: none;
  stroke: white;
  stroke-width: 10;
  stroke-linecap: butt;
  stroke-dasharray: 20;
}

.flowBorder {
    fill: none;
  stroke-width: 1;
  
}

 .anime .flow, #flow1 .flow {
  animation-duration: 8s;
  animation-name: dash;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-timing-function: linear;
}

/** KEY FRAMES **/
@keyframes dash {
  to {
    stroke-dashoffset: -200;
  }
}

@keyframes rotAspas {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes rotWAspas {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

JavaScript

//M 10 10 C 20 20, 40 20, 50 10
function genPathXY(x1, y1, x2, y2, offset){
 var dx = (x2 - x1);
 var dy = (y2 - y1);
 var ofs = dx > 0 ? offset : -1 * offset;
 return 'M'+ x1 +' ' + (y1 + offset) +
 		' c ' + ( dx ) + ' ' + offset +
 		' , ' + (dx - ofs) + ' ' + (-offset) +
 		' , ' + (dx  - ofs ) + ' ' + (dy - offset);
}

function genPathXYwithBorder(x1, y1, x2, y2 , className){
  var p = defs.group().addClass(className);
  var pdef = defs.path(genPathXY(x1, y1, x2, y2, 0));
  p.use(pdef).addClass('flow');
  var pdb1 = defs.path(genPathXY(x1 , y1, x2 , y2, -5));
  p.use(pdb1).addClass('flowBorder');
  var pdb2 = defs.path(genPathXY(x1 , y1, x2, y2, 5));
  p.use(pdb2).addClass('flowBorder');
  return p;
}

function genPathYX(x1, y1, x2, y2, offset){
 var dx = (x2 - x1);
 var dy = (y2 - y1);
 var ofs = dx > 0 ? offset : -1 * offset;
 return 'M'+ (x1 + offset) +' ' + y1 +
 		' c ' + offset + ' ' + (dy + offset) +
 		' , ' + ofs + ' ' + (dy - ofs) +
 		' , ' + (dx  - offset ) + ' ' + (dy - ofs);
}

function genPathYXwithBorder(x1, y1, x2, y2 , className){
  // PATHS
  var p = defs.group().addClass(className);
  var pdef = defs.path(genPathYX(x1, y1, x2, y2, 0));
  p.use(pdef).addClass('flow');
  var pdb1 = defs.path(genPathYX(x1 , y1, x2 , y2, -5));
  p.use(pdb1).addClass('flowBorder');
  var pdb2 = defs.path(genPathYX(x1 , y1, x2, y2, 5));
  p.use(pdb2).addClass('flowBorder');
  return p;
}

function genPathYY(x1 , y1 , x2 , y2, offset){
 var dx = (x2 - x1) /2;
 var dy = (y2 - y1) /2 ;
 var l1 = dx > 0? 0:1;
 var l2 = dx > 0? 1:0;
 var offset2 = dx >0? offset: -offset;
 // m 0,0 c 0,0 0,12 24,12 24,0 24,12 24,12
 return 'M'+ (x1 + offset) +',' + y1 +
 				' a ' + dx + ' , ' + (dy - offset2)+ 
        ' 0 0, ' +l1 +
        ' ' + dx + ',' + (dy - offset2) +
        ' a ' + dx + ' , ' + (dy + offset2) + 
        ' 0 0, ' +l2 +
        ' ' + dx + ',' + (dy + offset2) ;
}


function genPathYYwithBorder(x1, y1, x2, y2 , className){
  // PATHS
  var p =...