HTML

 CSS

 JavaScript

This JavaScript code generates small circles inside a larger circle and positions them in a circular layout. The `circles` array defines each small circle’s color and label (numbers 1 to 10). The `createCircles` function handles the rendering.
First, it calculates the container’s radius and determines the angle between each circle to ensure equal spacing. Each circle’s size is calculated based on the container’s dimensions and reduced by a fixed value (`circleSizeReduction`).
Using trigonometric functions, the code computes x and y coordinates for each circle to place them around the center. A div element is created for each circle, styled with background color, size, and label, and positioned with absolute positioning. The result is a visually balanced arrangement of small circles rotating around a central point.

Practical application for development

  • A rotating circular menu feature plugin. This menu functionality could be integrated into the PolyBlocks plugin.
  • For a feng shui or astrology plugin, it can showcase animations for constellations, the five elements, the 12 zodiac animals, and astrological signs.