Playground Shapes

Use this page to explore particle shape.type values in isolation, with one focused config per shape and explicit shape.options when the shape supports them.

Showing shape demos with per-shape options where available.

Circle with explicit options block.

Recipe: open docs

Press Start to run the demo.

1066 chars

{
  "key": "absorbers",
  "name": "Absorbers",
  "particles": {
    "number": {
      "value": 300
    },
    "collisions": {
      "enable": true
    },
    "paint": {
      "fill": {
        "color": {
          "value": "#f0f0f0"
        },
        "enable": true
      }
    },
    "shape": {
      "type": "circle"
    },
    "opacity": {
      "value": {
        "min": 0.1,
        "max": 1
      }
    },
    "size": {
      "value": {
        "min": 1,
        "max": 2
      }
    },
    "move": {
      "enable": true,
      "speed": 0.5,
      "direction": "top",
      "straight": true,
      "warp": true
    }
  },
  "interactivity": {
    "events": {
      "onClick": {
        "enable": true,
        "mode": "push"
      }
    },
    "modes": {
      "push": {
        "quantity": 10
      }
    }
  },
  "absorbers": {
    "draggable": true,
    "size": {
      "value": {
        "min": 5,
        "max": 10
      },
      "limit": 10
    },
    "position": {
      "x": 50,
      "y": 50
    }
  },
  "background": {
    "color": "#0d47a1"
  }
}

Playground Shapes ​

Playground Shapes