Animations are always given a valuable priority in the sector of designing. The animation can be of different types and can be designed in different ways. The only important point is that is it should be fit according to the requirement. There are lots of web animation that can be created using the HTML, CSS, and JavaScript and you can use gravity points example in different sites.

Among different web animation like animated clocks, sliders, toggles, gravity points is also one of them. You can use this animation and make your web page awesome and look attractive. You can also use this animation for the related web projects.

10 Gravity Points Design Examples with Source Code

People may have difficulties in searching the animation as all are not so good. This article provides you the list and code of 10 best Gravity Points examples.

You can easily go through the site and simply use the required animation for your projects.


1. Gravity Ball to Mouse

Gravity Ball to Mouse

Gravity Ball is an awesome example of the gravity point animation. This example contains a group of multiple points that moves in the direction of the mouse cursor.

This awesome animation is pin by the Fabio in codepen.

Code and Demo

2. Little Emitter Example

Little Emitter

Litter Emitter is a beautiful animation of the Gravity Points. The small colorful dots fall downward from the fixed points and scattered by changing its color. This beautiful animation is pen by deep magic.

Code and Demo

3. Clickable Particles Code Snippet

Clickable Particles

Another example of awesome Gravity Points is Clickable Particle. This animation contains the small blue dote which moves away from the position where the mouse is clicked.

This attractive animation is created by Jan N.

Code and Demo

4. Magnetic Gravity Points

Magnetic Gravity Points

Magnetic Gravity Points is a really attractive animation for Gravity points. The combination of colorful big dots and small white dots makes the animation really awesome.

The big dots move with the movement of the mouse and are followed by the small white dots.

Code and Demo

5. Red Gravity Dots

Red Gravity Dots

Red Gravity Dots contains red and black dots. The black dots are attracted to the red dots. You can increase the number of red dots just by clicking anywhere on the screen.

Code and Demo

6. Particles with Source Code


Another example of the Gravity Points is Particle. This is also an awesome animation where the dots are created when you click on the screen. The dots start to move in a random direction.

Code and Demo

7. Gravity Points For Designer

Gravity Points

Gravity points is one of the great examples in the list. It contains small white particles. The white particles are directed toward the black point which appears when you click the mouse on the screen.

You can also increase the number of a particle from controls.

Code and Demo

8. Gravity Trials Design Code

Gravity Trials

Gravity trials is a bit different and amazing example of Gravity points. The colorful trial moves toward the dots which you can create just by clicking anywhere on the screen.

Code and Demo

9. Attracted Shooting Stars

Attracted Shooting Stars

Attracted Shooting Stars is one of the cool examples for gravity dots. This animation contains the numbers of small rings and lines.

The point size line moves around every ring. This animation is a pen by Jeremie Boulay.

Code and Demo

10. Coordinates Gravity HTML

Coordinates Gravity HTML

Coordinate Gravity is one of the useful examples of gravity points. It not only contains the animation but provides you the coordinates of the dots.

The multiple dots appear to moves upward from the fixed coordinate which is clicked.

Code and Demo


In conclusion, as like other animation Gravity Point is also one of the best animations. These examples of gravity points can be used for designing your webpages. All the animations in the list are created using the HTML, CSS and little JavaScript. The examples are retrieved from the code pen.

Pin It on Pinterest