Referencing figma vectors for a heatmap

v0
2

Hi, Bran! Welcome to the Vercel Community :waving_hand:

This sounds like a fun project! Thanks for sharing :smiley:

We don’t have a guide for this specific usecase, but maybe you could try prompting v0 with something like:

Create a complete Next.js webpage that displays a muscle heatmap.

Layout:

  • A centered heading: “Muscle Heatmap”
  • A responsive container displaying the front and back views of a human body side by side.

Functionality:

  • Use inline SVG illustrations for both front and back views, with each muscle group represented as a distinct path or group.
  • Assign unique id attributes to each muscle group (e.g., biceps-left, quads-right, trapezius).
  • Introduce a hardcoded array named highlightedMuscles containing strings corresponding to muscle group IDs (e.g., ["biceps-left", "quads-right"]).
  • Highlight the specified muscle groups in red with 70% opacity.

Styling:

  • Utilize Tailwind CSS for layout and styling.
  • Ensure the SVGs are responsive and maintain clarity across devices.

Additional Notes:

  • Include comments in the code to guide beginners on where to replace placeholder SVGs with their own exported from Figma.
  • Provide instructions on how to modify the highlightedMuscles array to highlight different muscle groups.

Could you give that a go?

I also recommend checking out @floguo’s v0 session for inspiration on prompting →