--- title: How I designed Moonwalk Audio’s website to turn... description: Designer Andy Clarke built an interactive illustrated website for audio studio Moonwalk Audio, whose team has worked on more than 1,200 games. Hovering over a... canonical: https://daily.dev/posts/how-i-designed-moonwalk-audio-s-website-to-turn-imagination-into-interaction-w4fmrckm8 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: How I designed Moonwalk Audio’s website to turn imagination into interaction | daily.dev og:description: Designer Andy Clarke built an interactive illustrated website for audio studio Moonwalk Audio, whose team has worked on more than 1,200 games. Hovering over a... og:url: https://daily.dev/posts/how-i-designed-moonwalk-audio-s-website-to-turn-imagination-into-interaction-w4fmrckm8 og:image: https://api.daily.dev/og/posts/w4fMRCkm8.png og:image:alt: How I designed Moonwalk Audio’s website to turn imagination into interaction og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # How I designed Moonwalk Audio’s website to turn imagination into interaction **[Blogging and all that Malarkey](https://daily.dev/sources/stuffandnonsense)** · 4 min read · 0 upvotes · 0 comments ## Summary Designer Andy Clarke built an interactive illustrated website for audio studio Moonwalk Audio, whose team has worked on more than 1,200 games. Hovering over a monochrome object in the homepage illustration turns it full colour, and clicking it plays music or sound effects. He layered SVG elements to animate objects, change their colour, and play audio while keeping file sizes small. CSS and vanilla JavaScript handle the animations and interactions, and the site is built with Eleventy. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How can I make an SVG illustration change color and play audio when a user interacts with it? Layer SVG elements so each object can be targeted individually, then use CSS to switch styling (like color) on hover and vanilla JavaScript to trigger audio playback on click or press. This approach keeps file sizes small compared to video or heavier media, and was used to build an interactive homepage illustration where monochrome objects turn full color and play sound effects when triggered. _Developers building interactive SVG experiences can find more implementation approaches like this on daily.dev._ ## Similar posts on daily.dev - [Last week in the studio \(CW42-26\)](https://daily.dev/posts/last-week-in-the-studio-cw42-26--xhj2crm3v) · Blogging and all that Malarkey · 0 upvotes · 0 comments - [How I designed an animated SVG-driven website for composer Begoña Pereda](https://daily.dev/posts/how-i-designed-an-animated-svg-driven-website-for-composer-bego-a-pereda-gvz45h8ux) · Blogging and all that Malarkey · 3 upvotes · 1 comments - [Building the Maxima Therapy Website: React, GSAP, and Dabbling with AI](https://daily.dev/posts/building-the-maxima-therapy-website-react-gsap-and-dabbling-with-ai-we76kcyl9) · Codrops · 33 upvotes · 2 comments --- Tags: [#css](https://daily.dev/tags/css), [#ui-design](https://daily.dev/tags/ui-design), [#svg](https://daily.dev/tags/svg) [View this post on daily.dev](https://daily.dev/posts/how-i-designed-moonwalk-audio-s-website-to-turn-imagination-into-interaction-w4fmrckm8) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"How I designed Moonwalk Audio’s website to turn imagination into interaction","url":"https://daily.dev/posts/how-i-designed-moonwalk-audio-s-website-to-turn-imagination-into-interaction-w4fmrckm8","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/how-i-designed-moonwalk-audio-s-website-to-turn-imagination-into-interaction-w4fmrckm8"},"datePublished":"2026-10-31T23:22:36.897Z","dateModified":"2026-10-31T23:24:00.681Z","description":"Designer Andy Clarke built an interactive illustrated website for audio studio Moonwalk Audio, whose team has worked on more than 1,200 games. Hovering over a...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/e191661d7ea3e6eb1ac87d52e2b5b01c?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/e191661d7ea3e6eb1ac87d52e2b5b01c?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Blogging and all that Malarkey","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Blogging and all that Malarkey","logo":"https://media.daily.dev/image/upload/s--EAFiC7C---/f_auto/v1764512231/logos/stuffandnonsense","url":"https://daily.dev/sources/stuffandnonsense"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/how-i-designed-moonwalk-audio-s-website-to-turn-imagination-into-interaction-w4fmrckm8","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"css,ui-design,svg","timeRequired":"PT4M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Blogging and all that Malarkey","item":"https://daily.dev/sources/stuffandnonsense"},{"@type":"ListItem","position":3,"name":"How I designed Moonwalk Audio’s website to turn imagination into interaction"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/how-i-designed-moonwalk-audio-s-website-to-turn-imagination-into-interaction-w4fmrckm8#faq","mainEntity":[{"@type":"Question","name":"How can I make an SVG illustration change color and play audio when a user interacts with it?","acceptedAnswer":{"@type":"Answer","text":"Layer SVG elements so each object can be targeted individually, then use CSS to switch styling (like color) on hover and vanilla JavaScript to trigger audio playback on click or press. This approach keeps file sizes small compared to video or heavier media, and was used to build an interactive homepage illustration where monochrome objects turn full color and play sound effects when triggered. Developers building interactive SVG experiences can find more implementation approaches like this on daily.dev."}}]} ```