Javascript / CSS effect - Hexagon figure to move on our website and follow mouse movement

I represent an agency I need some help with a js/css effect. I´m working on a new website, build on Wordpress/Divi theme, where I want to add a cool css or javascript effect, where I want to have a small moving hexagon kind of figure that is moving randomly on a specific fullwidth part of the homepage , and if the user move his mouse then this effect will follow the mouse. On a touchscreen this effect will just move randomly. We want this effect to be identical to an effect we have seen on another website. Requirements: 1. It need to work in all devices like desktop, tablet and mobile, on all screen sizes. 2. It need to work on all popular browsers like, Chrome, Safari, IE, Firefox and Opera. 3. All custom css and javascript coding need to be added in the frontend, either directly in the custom css section in the Divi theme or in the "Code snippets" plugin I have installed in the site. 4. The custom coding need to be well-documented and follow best practise. 5. The custom coding need to be explained, so we understand how we also can add this effect in other sites that we have. We need example to what parts need to be changed in the code to make it work other places. 6. The custom coding should slow down the loading time on the website. 7. The custom coding should not make our scores in Pingdom or GTmetrix decrease. 8. The custom coding should not add additional CSS files served from our website, because this might decrease or Pingdom and GTmetrix score. 9. The custom coding should not add additional JS files served from our website, because this might decrease or Pingdom and GTmetrix score.