I saw this page and wanted to know if anyone can point us in the direction of how this was created? this moving effect in the header. https://www.jetbrains.com/

i tried something like but i dont know exactly how to make the image move and react on mouseevent.

function print_image_in_canvas(){ var logo_canvas = document.getElementById('canvas'); var x = logo_canvas.getContext('2d');

logo_canvas.width = 800; logo_canvas.height = 500;

var img = new Image(); img.src = 'Blob.png'; img.addEventListener("load", function(){x.drawImage(img,320,50)});

} window.addEventListener("load", print_image_in_canvas);

  • 4
    I'm voting to close this question as off-topic because it's a code implementation question more suitable for Stack Overflow
    – Luciano
    Jun 4, 2019 at 15:38

1 Answer 1


It's not a .png - that .png is just a background behind it - that is also there so that the entire animation area "shows" as an image to the cursor and is then available for right-click save image events.

It's a javascript animation, which has an event listener for mouseover.

Hope this helps.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.