Animated mosaic pattern menu design

Question

Animated mosaic pattern menu design

Is there a way to achieve this effect with a sketch?

Note: I would like to add hover animation to the borders if possible.

I attempted to do it using the following code:

clip-path: polygon(0 0, 100% 0, 92% 86%, 6% 100%);

However, the shapes created by the code extend beyond the boundaries of the div box.

You can see my attempt here:

I considered using SVG, but since the menu content is dynamic and the text might change, it may not be suitable. Any ideas on how to achieve this effect are welcome!

Thank you!

javascript jquery html css svg

Answer 1

Answer №1

I apologize in advance for my bluntness, but I have reservations about the methodology you are currently employing to achieve success. Here are the steps I believe you should take in order to succeed:

Start by utilizing a canvas
Analyze the points and lines from the image to determine the necessary polygons and lines
Based on the above analysis, draw the content on the canvas with special attention to creating a hovered state
Implement mousemove and click Javascript events for your canvas

`

canvas.addEventListener('mousemove', function(e) {
    //Your logic goes here, using e.clientX and e.clientY as coordinates
});

canvas.addEventListener('click', function(e) {
    //Your logic goes here, using e.clientX and e.clientY as coordinates
});

`

Answer 2

I apologize in advance for my bluntness, but I have reservations about the methodology you are currently employing to achieve success. Here are the steps I believe you should take in order to succeed:

Start by utilizing a canvas
Analyze the points and lines from the image to determine the necessary polygons and lines
Based on the above analysis, draw the content on the canvas with special attention to creating a hovered state
Implement mousemove and click Javascript events for your canvas

`

canvas.addEventListener('mousemove', function(e) {
    //Your logic goes here, using e.clientX and e.clientY as coordinates
});

canvas.addEventListener('click', function(e) {
    //Your logic goes here, using e.clientX and e.clientY as coordinates
});

`

Animated mosaic pattern menu design

Answer №1

Similar questions

Comparing strings with if-else statement

Running concurrent codes is not possible in Node.js serialport

Exploring the context of file upload events and analyzing javascript functionality

Scraping dynamic content with Python for websites using JavaScript-generated elements

I'm struggling to achieve the placement of my logo and navigation bar side by side

Anyone faced the issue of jquery_ujs corrupting the callback URL in Rails 4, causing problems with updating screens via Ajax?

Display PDF in Forge Viewer using PDF Extension - warning generated by pdf.worker.js

Step-by-step guide on utilizing jQuery to fade out all elements except the one that is selected

Target specifically the onhover div element using JQuery and trigger the smooth sliding down effect with the SlideDown() function

Choosing the attribute value using jQuery/CSS

Utilizing CURL for PHP to extract information from any webpage

What is the best way to create a slideshow that automatically starts upon loading and pauses when hovered over?

Tips for updating the state of an individual component in ReactJS without having to re-render the entire component

The webpack production build consistently displays the message "This site is running on the development build of React."

Guide to sending an HTML document containing images using the express framework

Refresh a div element automatically with information from a different webpage using jQuery

Customizing the appearance of a date input field by passing an object with Vue.js

Retrieve data via AJAX using a combination of JavaScript and ASP

Errors occurred when trying to use Jquery to handle a JSON response

Guide on stacking a transformed 3D div on top of a masked layer with higher Z-index without success