Background Rotation Fans
Source on GitHub

Download

Show up to 50 fans, each with two different colors, rotating at different speeds. 

<background-rotating-fans></background-rotating-fans>

CSS Variables

--fan1-???
--fan2-???
--fan3-??? 		You can have up to 50 fans, each with their own set of variables. They need to start at number 1 and increase by 1 for each extra fan you are adding.
--fan1-color1
--fan1-color2 		The fan has two colors. Use these to set the color of each fan blade.
--fan1-gap The size of each fan blade, in deg units. Make sure they can be divided by 360 degrees, otherwise it will not look correct.
--fan1-color-gap There is a gap between each color blade that has a smooth shading. The larger this amount the more blurry the fin joins look (in deg).
--fan1-speed The time it takes to rotate 360 degrees.
--fan1-x
--fan1-y 		The offset where the center of the fan is located. To be in the top left corner, set x to -50% and y to -50%. You can use rem, em and so on, but not "0".
--fan1-opacity How transparent the whole fan is (0 to 1).

Notes

Be careful with the opacity value. You may block other fans if you do not allow them to be seen through.

Examples

Single fan and an offset that is on screen

In this example we are only using one fan. We are positioning the center of the fan towards the top left. It is slowly rotating, at around one full rotation every 2 minutes. Because there is only one fan, the opacity is set to 1.0. 

<background-rotating-fans
  style="
    height: 15rem;
    --fan1-color1: #f9c750;
    --fan1-color2: #287ea1;
    --fan1-speed: 120s;
    --fan1-gap: 20deg;
    --fan1-color-gap: 0.5deg;
    --fan1-x: -40%;
    --fan1-y: -30%;
    --fan1-opacity: 1.0;">
</background-rotating-fans>

Single fan, offset is off screen, with blurry fan blades

Here we are using a shorter fan angle but with a larger color gap, which allows the two colors to mix together. The center of the fan is outside of the background area. 

<background-rotating-fans
  style="
    height: 15rem;
    --fan1-color1: #90e0ef;
    --fan1-color2: #023e8a;
    --fan1-speed: 60s;
    --fan1-gap: 10deg;
    --fan1-color-gap: 9.0deg;
    --fan1-x: 60%;
    --fan1-y: -70%;
    --fan1-opacity: 1.0;">
</background-rotating-fans>

Two fans at different speeds

We have added another fan in this example. The first fan CSS variables start with the prefix --fan1 and the second fan starts with --fan2. Both fans are positioned in different locations, have different colors, rotate at different speeds and have different angles. They both have the same opacity value of 0.5, so that you can both fans through each other. 

<background-rotating-fans
  style="
    height: 15rem;
    --fan1-color1: #ff99c8;
    --fan1-color2: #fcf6bd;
    --fan1-speed: 120s;
    --fan1-gap: 20deg;
    --fan1-color-gap: 1deg;
    --fan1-x: -40%;
    --fan1-y: -40%;
    --fan1-opacity: 0.5;
    --fan2-color1: #9d4edd;
    --fan2-color2: #ff8fa3;
    --fan2-speed: 30s;
    --fan2-gap: 10deg;
    --fan2-color-gap: 0.5deg;
    --fan2-x: 40%;
    --fan2-y: 40%;
    --fan2-opacity: 0.5;">
</background-rotating-fans>

Three fans, all with different settings

Here we are using 3 fans. They are all using different settings. The opacity is set to 0.3333 for each, allowing each one to be seen through the other. 

<background-rotating-fans
  style="
    height: 15rem;
    --fan1-color1: red;
    --fan1-color2: gold;
    --fan1-speed: 120s;
    --fan1-gap: 20deg;
    --fan1-color-gap: 0.5deg;
    --fan1-x: -40%;
    --fan1-y: -45%;
    --fan1-opacity: 0.3333;
    --fan2-color1: green;
    --fan2-color2: white;
    --fan2-speed: 90s;
    --fan2-gap: 30deg;
    --fan2-color-gap: 1deg;
    --fan2-x: 60%;
    --fan2-y: -60%;
    --fan2-opacity: 0.3333;
    --fan3-color1: blue;
    --fan3-color2: white;
    --fan3-speed: 60s;
    --fan3-gap: 10deg;
    --fan3-color-gap: 2deg;
    --fan3-x: -10%;
    --fan3-y: 60%;
    --fan3-opacity: 0.3333;">
</background-rotating-fans>