This started off as an exercise to learn Pug and ended up being a lot of fun creating this interactive swirly thing.
- Built using a minimal amount of code in Express, Pug, JavaScript and CSS.
- Why Pug? and what is it? Just like EJS it's a template engine for Node which compiles to HTML. I like it because of the simplified syntax. For example to generate 25 divs with the class 'line' you just have to do this:
- let count = 25;
while count--
.line- How does the movement work? The CSS variables determine the movement of the lines using the width, height and transform properties in the
.lineclass in style.css. JavaScript is used to update the CSS variables. For example, this updates the--sizevariable for each line:
$('.size').addEventListener('input', (e) => {
document.documentElement.style.setProperty('--size', e.target.value);
}, false);