DEV Community

Cover image for Build a 360 Starburst Animation Using FSCSS
FSCSS tutorial profile image FSCSS tutorial
FSCSS tutorial for FSCSS tutorial

Posted on

Build a 360 Starburst Animation Using FSCSS

#fscss #animation #css #frontend

Traditional CSS struggles when you need to generate hundreds of repeated elements with dynamic transformations.

With FSCSS, you can do this elegantly using arrays, loops, and computed values — all inside your styles.

In this guide, we’ll build a 360-degree radial starburst animation using FSCSS.

What We’re Building

A circular pattern made of 360 elements, each rotated slightly to form a full radial burst.

Each ray ends with a small geometric shape, creating a complex animated structure.

HTML 

<div class="box"></div>
Enter fullscreen mode Exit fullscreen mode

JavaScript (Generate 360 Elements) 

const box = document.querySelector(".box");

for (let i = 0; i < 360; i++) {
  const star = document.createElement("div");
  star.className = "star";
  box.appendChild(star);
}
Enter fullscreen mode Exit fullscreen mode

Instead of writing 360 elements manually, JavaScript handles it.

FSCSS Code 

@import((*) from snake_case)
@import((*) from themes)
@import((flex-wrap-center as flex_wrap) from flex-control)

body {
  background_color: #233332;
}

.box {
  %2(width, height [: 400px;])
  position: absolute;
  transform_style: preserve-3d;
  @flex_wrap()
}

@arr pos[count(360, 10)]

.box .star:nth-child(@arr.pos[]) {
  $pos: @arr.pos[];

  background: #2FF200;
  padding: 1px;
  width: 100px;
  position: absolute;

  transform_origin: right;
  transform: rotate($pos!deg);
}

.star:before {
  content: " ";
  position: absolute;
  width: 20px;
  height: 20px;
  background: #C800F2;

  top: -8.5px;
  left: -7px;

  transform: rotate(60deg);

  tr Shape: @event.shape(star);
}

$(@keyframes rotate,.star &[360s linear infinite alternate]) {
  to {
    transform: rotate(0);
  }
}
Enter fullscreen mode Exit fullscreen mode

How It Works

1. Array Generation

@arr pos[count(360, 10)]

This creates a sequence:

10, 20, 30 ... 350

Each value is used to rotate an element.

  1. Dynamic nth-child Targeting

.box .star:nth-child(@arr.pos[])

FSCSS maps each array value to a corresponding element automatically.

3. Rotation Per Element

transform: rotate($pos!deg);

Each .star rotates based on its assigned value, forming a full circle.

4. Shape Injection via Event from the imported themes

tr Shape: @event.shape(star);

This dynamically applies a shape transformation, allowing reusable geometric logic.

5. Animation Binding

$(@keyframes rotate,.star &[360s linear infinite alternate])
FSCSS binds animation directly to the selector in one line.

Why This Is Powerful

With FSCSS, you get:

  • Looping without preprocessors
  • Dynamic selectors
  • Inline logic and transformations
  • Reusable event-driven styling
  • Zero runtime overhead

Final Result

You now have a fully procedural radial animation, built with:

  • 1 HTML element
  • 1 loop in JavaScript
  • FSCSS handling all styling logic

codepen demo

https://codepen.io/David-Hux/pen/gbwvqGb

FSCSS changes how you think about CSS.

Instead of writing repetitive rules, you define behavior — and let the system generate the rest.

You can extend this into:

  • loaders
  • charts
  • generative UI
  • data-driven visuals

Want more like this?

Top comments (0)