svg fluid

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;
}

.aspas{
  transform-origin: 0 0;
}

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

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

JavaScript

var draw = SVG().addTo('body').size('100%', '100%')
		.stroke({ color:"blue",width: 1 }).fill('none');


//Create nested, with inner elements (rect)
var nested = draw.nested().move(100, 0);

//DEFS
var defs = draw.defs();

//Defs aspa, torreta y circle
var aspaDef1 = defs.polygon('0,-1,1,1,10,4,45,0,45,-1');
var aspaDef2 = defs.use(aspaDef1).transform({rotate:120, ox: 0, oy: 0});
var aspaDef3 = defs.use(aspaDef1).transform({rotate:240, ox: 0, oy: 0});
var torretaDef = defs.polygon('-1,0,1,0,3,70,-2,70');
var circleDef =defs.circle(6).move(-3,-3).attr({ fill: 'blue' });
//Aspas
var aspasDef = draw.group().addClass('aspas');
aspasDef.add(aspaDef1);
aspasDef.add(aspaDef2);
aspasDef.add(aspaDef3);


//turbina
var turbinaDef = defs.group();
turbinaDef.use(aspasDef);//.rotate(25,0,0);
turbinaDef.use(torretaDef);
turbinaDef.add(circleDef);


var use1  = draw.use(turbinaDef).addClass('aspas1').move(50, 200);
var use2  = draw.use(turbinaDef).addClass('aspas2').move(100, 200);
var use3  = draw.use(turbinaDef).addClass('aspas3').move(150, 200);
var use4  = draw.use(turbinaDef).addClass('aspas4').move(200, 200);