DEV Community

FSCSS
FSCSS

Posted on

Create Dynamic Shapes with FSCSS: A Quick Guide for Devs

Create Dynamic Shapes with FSCSS

If you’re looking to add some flair to your web projects, this FSCSS-powered shape generator is a lightweight way to create dynamic, colorful shapes with minimal code. Let’s dive into how it works and why it’s a neat tool for developers.

🔹 The Code

Here’s the complete snippet to generate 10 unique shapes with FSCSS:

<!-- Container for shapes -->
<section class="shapes" id="shapes"></section>

<style>
  /* Import FSCSS initialization and themes */
  @import(exec(_init themes))

  /* Define arrays for shapes and colors */
  @arr list[cross, star, diamond, cloud, teardrop, triangle, hexagon, trapeziod, crescent, arrow, square]
  @arr colors[red, blue, green, orange, purple, pink, brown, teal, gold, violet, gray]

  /* Style shapes using arrays */
  .shape:nth-child(@arr.list[]){
    %2(width, height [: 100px;])
    clip-path: @event.shape(@arr.list[]);
  }
  .shape:nth-child(@arr.colors[]){
    background: @arr.colors[];
    display: inline-block;
  }
</style>

<script>
  // Dynamically generate 10 shape divs
  const shapeContainer = document.getElementById("shapes");
  for (let i = 0; i < 10; i++) {
    const shape = document.createElement("div");
    shape.className = "shape";
    shapeContainer.appendChild(shape);
  }
</script>

<!-- FSCSS CDN -->
<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.6" async></script>
Enter fullscreen mode Exit fullscreen mode

🚀 Why It’s Cool

FSCSS Magic

→ The @arr and @event directives let you loop through shapes and colors effortlessly, reducing repetitive CSS.

Dynamic & Scalable

→ The JavaScript loop creates

s on the fly, and FSCSS applies unique shapes and colors based on array indices.

Lightweight

→ Minimal code for a visually engaging result, perfect for prototypes or creative UI elements.

⚙️ How It Works

  • HTML → A simple acts as the container for dynamically generated shapes.

  • FSCSS → Uses arrays (list for shapes, colors for backgrounds) and the @event.shape function imported to apply clip-path styles dynamically.

  • JavaScript → Creates 10

    elements with the shape class, appended to the container.

  • Styling → Each shape gets a unique clip-path and color, displayed inline for a grid-like effect.

    • 🎨 Try It Out

    Drop this code into your HTML, ensure the FSCSS library is loaded, and watch colorful shapes come to life!

    It’s great for:

    • UI experiments

    • Loading animations

    • Interactive backgrounds

    📚 Learn More

    Check out the FSCSS for more on @arr, @event and much more.
    Share your tweaks or use cases in the comments! 🚀

Top comments (0)