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

I'm having trouble assigning the data from my object to the setState in my React class component

What is the correct way to interpret the URL of attachments in messages?

Encountering an error stating "cloudinary.uploader is undefined" while attempting to delete media files from Cloudinary

An Angular JS interceptor that verifies the response data comes back as HTML

Endless looping of numerous consecutive animations

How can JavaScript be used to automatically send a user to a designated page based on a selected option in

Adjusting the content within a text area using an AngularJS service

Passing a date string from the Controller to JavaScript using the AJAX method

generate a flexible div that adjusts its height based on the size of the browser window

Switch out external CSS stylesheets automatically using toggle scripting

What steps can be taken to create a progress bar in the input field that spans the entire width of its parent div, reaching

Establishing the NumbroJS cultural settings

What makes CSS Overflow: hidden toggle from working initially to suddenly not working?

Swapping out one variable for another

Exploring nested documents in mongoDB with mongoose

The JSON reviver function is still not returning anything even when explicitly using the return

Press and hold feature using CSS or JavaScript

Remove properties that are not part of a specific Class

Unable to Delete Record Using Jquery and Express in 'DELETE' Request

Closing the dropdown menu by directly clicking on the button