JSFiddle - React, Tailwind, and code Playground
by luka kupunia
CSS
.border {
width: 1px;
height: 100vh;
background: red;
position: absolute;
top: 0;
transform-origin: right bottom;
}
JavaScript
var res = [];
function getGrid(n){
var fibonacci_series = function(n){
if (n===1){
return [0, 1];
}
else{
var s = fibonacci_series(n - 1);
s.push(s[s.length - 1] + s[s.length - 2]);
res.push(s);
/* console.log(res) */
return s;
}
};
var sum = fibonacci_series(n).reduce(function(a,b){
return a + b;
})
for(var i = 0; i < n; i++){
var create = document.createElement('div');
create.classList.add('border');
document.querySelector('body').append(create);
create.style.left = 50 / sum * fibonacci_series(n)[i] * 10 + '%';
/* create.style.transform = 'rotate(' + 100 / sum * fibonacci_series(n)[i] / 1 +'deg)'; */
}
}
getGrid(3)