🌀 Swirly Thing made with Node, Pug + CSS 🌀
This started off as an exercise to learn Pug and ended up being a lot of fun creating this interactive swirly thing.
- 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
--sizevariable for each line: