Share your repls and programming experiences

← Back to all posts
🌀 Swirly Thing made with Node, Pug + CSS 🌀
RolandJLevy (1083)

This started off as an exercise to learn Pug and ended up being a lot of fun creating this interactive swirly thing.

Links 🔗

Features 💡

  • 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 .line class in style.css. JavaScript is used to update the CSS variables. For example, this updates the --size variable for each line:
$('.size').addEventListener('input', (e) => {
  document.documentElement.style.setProperty('--size', e.target.value);
}, false);
Comments
hotnewtop
LeoSekour (29)

i dont know what it is... but i like it!

RolandJLevy (1083)

Hi @LeoSekour, thanks - me neither! I'm just experimenting

DynamicSquid (4892)

What's Pug? Looking at the code it seems like a version of HTML?

RolandJLevy (1083)

@DynamicSquid, I'm new to Pug and just beginning to learn 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 s = 25;
while s--
    .line
DynamicSquid (4892)

@RolandJLevy Oh that's neat, seems interesting

python88 (299)

that's alot of code... ()_()