Gravity Point : A Gravity Stimulator

Gravity Point: A Gravity Stimulator


Just created gravity-points just by using plain Html, CSS & good old JavaScript.The idea is whenever you click on any point on the website a black hole will be created. Due to the creation of the black hole, all the gravity points will start to revolve around it. 


You can create endless numbers of black holes but all of them will eventually merge and will become a single big black hole. When you click on the giant blackhole all the gravity points evolving around it will get blown away.


DEMO:

Here is a live demo play around with it as much as you want. Click randomly as fast as possible to get the best experience. ( In the top left corner you could see open-controls.Open it and add and reduce the number of gravity points)


Enjoy watching it in full screen: https://codepen.io/ashishkhuraishy/full/ePjxXL

Code:

Enough chit-chat now lets come into the part of actual coding. Here's all that I've done.


HTML:


Its all for HTML section now let's jump into the CSS.


CSS:

Here's all the CSS I've used in my code.


JAVASCRIPT:

Here's where all the magic happens.



Enjoyed it?


GitClone Link: https://gist.github.com/1c96d5e1b6b635784b84781421bd33f1.git



Feel free to post the feedback /edit this and post it on the comments.

Happy Coding.



Post a Comment

0 Comments