Share your repls and programming experiences

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

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:
  • 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:
Voters
GrimReaper007
programmeruser
python88
LeoSekour
tankerguy1917
DynamicSquid
fuzzyastrocat
badst
RolandJLevy
Comments
hotnewtop
LeoSekour

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

RolandJLevy

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

FlaminHotValdez

s w e e t

RolandJLevy

thanks @maxyang :)

DynamicSquid

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

RolandJLevy

@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:

DynamicSquid

@RolandJLevy Oh that's neat, seems interesting

python88

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