Skip to content

Instantly share code, notes, and snippets.

@stanwmusic
Created July 1, 2020 08:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stanwmusic/3daccb7c8a343584f388658f0b7edcb5 to your computer and use it in GitHub Desktop.
Save stanwmusic/3daccb7c8a343584f388658f0b7edcb5 to your computer and use it in GitHub Desktop.
Pasta Menu (GSAP Animation)
<div class="body-clone" data-pasta="spaghetti">
<nav class="menu">
<div class="menu__link">
<svg class="menu__link__shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88.35 75.4">
<g id="spaghetti">
<path id="spa-1" class="main-1" d="M44.17,66.83a16.14,16.14,0,0,1-9.53-3.16,13.18,13.18,0,0,0-15.69,0A16,16,0,0,1,2,65a2,2,0,0,1-.78-2.53,1.59,1.59,0,0,1,1.43-1,1.39,1.39,0,0,1,.65.16,13.2,13.2,0,0,0,14-1.08,16,16,0,0,1,19.06,0,13.18,13.18,0,0,0,15.69,0,16,16,0,0,1,19.06,0A13.2,13.2,0,0,0,85,61.6a1.39,1.39,0,0,1,.65-.16,1.58,1.58,0,0,1,1.42,1A2,2,0,0,1,86.33,65a16,16,0,0,1-16.94-1.32,13.18,13.18,0,0,0-15.69,0A16.12,16.12,0,0,1,44.17,66.83Z" />
<path id="spa-2" class="main-2" d="M44.17,42.43a16.14,16.14,0,0,1-9.53-3.16,13.18,13.18,0,0,0-15.69,0A16,16,0,0,1,2,40.59a2,2,0,0,1-.78-2.53,1.59,1.59,0,0,1,1.43-1,1.52,1.52,0,0,1,.65.16,13.22,13.22,0,0,0,14-1.07,16,16,0,0,1,19.06,0,13.18,13.18,0,0,0,15.69,0,16,16,0,0,1,19.06,0A13.22,13.22,0,0,0,85,37.2a1.52,1.52,0,0,1,.65-.16,1.58,1.58,0,0,1,1.42,1,2,2,0,0,1-.77,2.53,16,16,0,0,1-16.94-1.32,13.18,13.18,0,0,0-15.69,0A16.12,16.12,0,0,1,44.17,42.43Z" />
<path id="spa-3" class="main-3" d="M44.17,18a16.14,16.14,0,0,1-9.53-3.16,13.16,13.16,0,0,0-15.69,0A16.14,16.14,0,0,1,9.41,18,16,16,0,0,1,2,16.19a2,2,0,0,1-.78-2.53,1.59,1.59,0,0,1,1.43-1,1.4,1.4,0,0,1,.65.17A13.17,13.17,0,0,0,9.4,14.3a13.34,13.34,0,0,0,7.87-2.57,16,16,0,0,1,19.06,0,13.3,13.3,0,0,0,7.84,2.59A13.35,13.35,0,0,0,52,11.73a16,16,0,0,1,19.06,0,13.32,13.32,0,0,0,7.86,2.57A13.24,13.24,0,0,0,85,12.81a1.4,1.4,0,0,1,.65-.17,1.58,1.58,0,0,1,1.42,1,2,2,0,0,1-.77,2.53A16.05,16.05,0,0,1,78.94,18a16.13,16.13,0,0,1-9.55-3.14,13.16,13.16,0,0,0-15.69,0A16.17,16.17,0,0,1,44.17,18Z" />
</g>
<g id="penne">
<path id="pen-1" class="end-path" d="M64.5,34.9c-0.6,0-1.2,0-1.8-0.1l-47-5.2c-2.4-0.3-4.6-1.3-6.2-2.9c-2.4-2.4-3.4-5.9-2.9-9.8c0.5-3.8,2.5-7.5,5.5-10.5 c2-2,4.4-3.6,6.9-4.5c1.9-0.7,3.8-1.1,5.6-1.1c0.5,0,1,0,1.5,0.1c0,0,46.8,5.2,46.8,5.2c2.7,0.2,5,1.2,6.7,3 c2.4,2.4,3.4,5.9,2.9,9.8c-0.5,3.8-2.5,7.5-5.5,10.5c-3,3-6.7,5-10.5,5.5C65.9,34.8,65.2,34.9,64.5,34.9L64.5,34.9z M71.9,8.6 c-0.5,0-1.1,0-1.6,0.1c-3.2,0.5-6.4,2.1-9,4.7c-2.6,2.6-4.3,5.8-4.7,9c-0.4,3,0.3,5.7,2.1,7.5c1.2,1.2,2.7,1.9,4.5,2.1 c0.5,0.1,0.9,0.1,1.4,0.1c0.5,0,1.1,0,1.6-0.1c3.2-0.5,6.4-2.1,9-4.7c2.6-2.6,4.3-5.8,4.7-9c0.4-3-0.3-5.7-2.1-7.5 c-1.2-1.2-2.7-1.9-4.5-2.1l-0.5-0.1C72.5,8.6,72.2,8.6,71.9,8.6z M10.9,22.8c-0.2,0-0.3,0.1-0.4,0.2c-0.1,0.2-0.1,0.4,0,0.5 c0.3,0.4,0.6,0.8,0.9,1.2c1.2,1.2,2.7,1.9,4.5,2.1l39.2,4.4c0,0,0,0,0.1,0c0.2,0,0.3-0.1,0.4-0.2c0.1-0.2,0.1-0.4,0-0.5 c-0.5-0.8-0.9-1.6-1.2-2.5c-0.1-0.2-0.2-0.3-0.4-0.3L10.9,22.8C11,22.8,10.9,22.8,10.9,22.8z M10.1,15.3c-0.2,0-0.4,0.1-0.5,0.4 c-0.1,0.5-0.2,1-0.3,1.5c-0.1,0.8-0.1,1.5-0.1,2.3c0,0.2,0.2,0.4,0.4,0.5l43.6,4.8c0,0,0,0,0.1,0c0.1,0,0.2,0,0.3-0.1 c0.1-0.1,0.2-0.2,0.2-0.4c0-0.7,0-1.4,0.1-2.2c0.1-0.4,0.1-0.9,0.2-1.3c0-0.1,0-0.3-0.1-0.4c-0.1-0.1-0.2-0.2-0.3-0.2L10.1,15.3 C10.2,15.3,10.1,15.3,10.1,15.3z M14.1,8.4c-0.1,0-0.3,0.1-0.4,0.2c-1,1.1-1.9,2.2-2.6,3.5c-0.1,0.1-0.1,0.3,0,0.5 s0.2,0.2,0.4,0.3l43.3,4.8c0,0,0,0,0.1,0c0.2,0,0.4-0.1,0.4-0.3c0.5-1.2,1.2-2.3,2-3.4c0.1-0.1,0.1-0.3,0.1-0.5 c-0.1-0.2-0.2-0.3-0.4-0.3L14.1,8.4C14.2,8.4,14.2,8.4,14.1,8.4z M24.7,3.4c-2.1,0-4.4,0.6-6.5,1.8c-0.2,0.1-0.3,0.3-0.2,0.5 c0,0.2,0.2,0.4,0.4,0.4l41.7,4.6c0,0,0,0,0.1,0c0.1,0,0.2,0,0.3-0.1c0.9-0.8,1.9-1.5,2.9-2.1c0.2-0.1,0.3-0.3,0.2-0.5 c0-0.2-0.2-0.4-0.4-0.4l-37-4.1l-0.1,0C25.5,3.4,25.1,3.4,24.7,3.4z"></path>
<path id="pen-3" class="end-path" d="M24.7,74.6c-0.7,0-1.4-0.1-2-0.1c-3.8-0.5-7.5-2.5-10.5-5.5c-3-3-5-6.7-5.5-10.5c-0.6-3.9,0.5-7.4,2.9-9.8 c1.7-1.7,4.1-2.8,6.7-3l46.7-5.2c0.6-0.1,1.1-0.1,1.6-0.1c1.9,0,3.8,0.4,5.6,1.1c2.5,1,4.9,2.5,6.9,4.5c3,3,5,6.7,5.5,10.5 c0.6,3.9-0.5,7.4-2.9,9.8c-1.6,1.6-3.7,2.6-6.1,2.9l-47,5.2C25.9,74.6,25.3,74.6,24.7,74.6z M17.3,48.4c-0.3,0-0.6,0-0.9,0l-0.4,0 c-1.8,0.2-3.4,1-4.5,2.1c-1.8,1.8-2.5,4.5-2.1,7.5c0.5,3.2,2.1,6.4,4.7,9c2.6,2.6,5.8,4.3,9,4.7c0.6,0.1,1.1,0.1,1.6,0.1 c0.4,0,0.9,0,1.3-0.1c1.9-0.3,3.4-1,4.6-2.2c1.8-1.8,2.5-4.5,2.1-7.5c-0.5-3.2-2.1-6.4-4.7-9c-2.6-2.6-5.8-4.3-9-4.7 C18.4,48.4,17.8,48.4,17.3,48.4z M78.3,62.5l-43,4.8c-0.2,0-0.4,0.2-0.4,0.3c-0.3,0.9-0.7,1.8-1.2,2.5c-0.1,0.2-0.1,0.4,0,0.5 c0.1,0.1,0.3,0.2,0.4,0.2c0,0,0,0,0.1,0l39.1-4.4c1.8-0.2,3.4-1,4.6-2.1c0.3-0.3,0.7-0.7,0.9-1.2c0.1-0.2,0.1-0.4,0-0.5 C78.7,62.6,78.5,62.5,78.3,62.5C78.3,62.5,78.3,62.5,78.3,62.5z M79.1,55l-43.6,4.8c-0.1,0-0.3,0.1-0.3,0.2s-0.1,0.3-0.1,0.4 c0.1,0.4,0.2,0.9,0.2,1.3c0.1,0.7,0.2,1.5,0.1,2.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.1,0.3,0.1c0,0,0,0,0.1,0l43.6-4.8 c0.2,0,0.4-0.2,0.4-0.5c0-0.7,0-1.5-0.1-2.2c-0.1-0.5-0.2-1-0.3-1.5C79.5,55.2,79.3,55,79.1,55C79.1,55,79.1,55,79.1,55z M75.1,48.1l-42.9,4.8c-0.2,0-0.3,0.1-0.4,0.3c-0.1,0.2,0,0.3,0.1,0.5c0.8,1.1,1.5,2.2,2,3.4c0.1,0.2,0.3,0.3,0.4,0.3 c0,0,0,0,0.1,0l43.3-4.8c0.2,0,0.3-0.1,0.4-0.3s0.1-0.3,0-0.5c-0.7-1.2-1.6-2.4-2.6-3.5C75.4,48.2,75.2,48.1,75.1,48.1 C75.1,48.1,75.1,48.1,75.1,48.1z M64.6,43.1c-0.4,0-0.9,0-1.3,0.1l-37.1,4.1c-0.2,0-0.4,0.2-0.4,0.4c0,0.2,0,0.4,0.2,0.5 c1,0.6,2,1.3,2.9,2.1c0.1,0.1,0.2,0.1,0.3,0.1c0,0,0,0,0.1,0l41.7-4.6c0.2,0,0.4-0.2,0.4-0.4c0-0.2-0.1-0.4-0.2-0.5 C69,43.7,66.7,43.1,64.6,43.1z">></path>
</g>
<g id="farfalle">
<path id="far-2" class="end-path" d="M62.59,45.15a17.62,17.62,0,0,1-10.7-3.38c-2.2-1.39-4.1-2.6-7.72-2.6s-5.51,1.21-7.71,2.6a17.62,17.62,0,0,1-10.7,3.38,1.49,1.49,0,0,1,0-3,14.79,14.79,0,0,0,9.11-2.91l.48-.31a1.49,1.49,0,0,0,.71-1.27,1.51,1.51,0,0,0-.71-1.27l-.48-.3a14.76,14.76,0,0,0-9.11-2.91,1.49,1.49,0,1,1,0-3,17.69,17.69,0,0,1,10.7,3.37c2.2,1.4,4.1,2.61,7.71,2.61s5.52-1.21,7.72-2.61a17.69,17.69,0,0,1,10.7-3.37,1.49,1.49,0,0,1,0,3,14.74,14.74,0,0,0-9.11,2.91l-.49.3a1.53,1.53,0,0,0-.7,1.27A1.48,1.48,0,0,0,53,39l.48.31a14.8,14.8,0,0,0,9.12,2.91,1.49,1.49,0,0,1,0,3Z" />
<path id="far-1" class="end-path" d="M74.88,73.65a16.51,16.51,0,0,1-8-2.59c-5.73-3.28-12.1-9.4-18.94-18.19a4.79,4.79,0,0,0-7.55,0c-6.85,8.79-13.22,14.91-18.94,18.19a16.55,16.55,0,0,1-8,2.59A6.78,6.78,0,0,1,10,72.78a4.7,4.7,0,0,1-1.84-6.17l.19-.43a4.28,4.28,0,0,0-2.14-5.61,7.53,7.53,0,0,1-4.1-5A7,7,0,0,1,3.3,49.75l.36-.49A4.08,4.08,0,0,0,3,43.58l-.47-.4a7.21,7.21,0,0,1,0-11L3,31.79a4.1,4.1,0,0,0,.64-5.69l-.37-.48a6.89,6.89,0,0,1-1.21-5.79,7.5,7.5,0,0,1,4-5A4.29,4.29,0,0,0,8.32,9.18,5.34,5.34,0,0,1,8.42,4c.94-1.47,2.72-2.27,5-2.27a16.82,16.82,0,0,1,8,2.54c5.72,3.29,12.09,9.41,18.94,18.2a4.79,4.79,0,0,0,7.55,0C54.79,13.71,61.16,7.59,66.89,4.3a16.74,16.74,0,0,1,8-2.55,5.65,5.65,0,0,1,5,2.27A5.38,5.38,0,0,1,80,9.19a4.26,4.26,0,0,0,2.14,5.6,7.54,7.54,0,0,1,4.1,5,7,7,0,0,1-1.21,5.81l-.37.48a4.1,4.1,0,0,0,.65,5.69l.46.39a7.19,7.19,0,0,1,0,11l-.46.4a4.09,4.09,0,0,0-.65,5.68l.37.49a6.92,6.92,0,0,1,1.21,5.79,7.47,7.47,0,0,1-4,5A4.26,4.26,0,0,0,80,66.18l.19.43A4.82,4.82,0,0,1,80,71.28a5.74,5.74,0,0,1-5.07,2.37ZM44.17,48.05a7.71,7.71,0,0,1,6.13,3C64.47,69.25,72.74,70.66,74.94,70.66a3.63,3.63,0,0,0,1.91-.44c1.36-.81.72-2.24.5-2.71l0-.11a7.27,7.27,0,0,1,3.53-9.49,4.6,4.6,0,0,0,2.53-3,4,4,0,0,0-.7-3.32l-.36-.48a7.12,7.12,0,0,1,1.11-9.77l.45-.38a4.23,4.23,0,0,0,0-6.46l-.45-.38a7.11,7.11,0,0,1-1.11-9.76l.36-.48a3.91,3.91,0,0,0,.7-3.32,4.52,4.52,0,0,0-2.43-3c-3.85-1.92-5.24-5.93-3.45-10a1.78,1.78,0,0,0-.65-2.41,3.66,3.66,0,0,0-1.9-.44c-2.2,0-10.47,1.42-24.64,19.63a7.78,7.78,0,0,1-12.25,0C23.87,6.12,15.6,4.7,13.41,4.7a3.72,3.72,0,0,0-1.91.44,1.78,1.78,0,0,0-.65,2.41,7.3,7.3,0,0,1-3.34,9.91A4.56,4.56,0,0,0,5,20.5a4,4,0,0,0,.69,3.33l.36.48a7.09,7.09,0,0,1-1.11,9.76l-.44.38a4.21,4.21,0,0,0,0,6.46l.44.38A7.11,7.11,0,0,1,6,51.06l-.36.48A4,4,0,0,0,5,54.85a4.56,4.56,0,0,0,2.43,3A7.28,7.28,0,0,1,11,67.4l0,.12c-.21.47-.86,1.89.51,2.7a3.63,3.63,0,0,0,1.91.44c2.19,0,10.47-1.41,24.64-19.62A7.71,7.71,0,0,1,44.17,48.05Z" />
</g>
<g id="ravioli">
<path id="rav-1" class="end-path" d="M8.73,75.4A3.93,3.93,0,0,1,6,74.18c-2.78-2.66-.54-5.33.94-7.09a7.06,7.06,0,0,0,2.15-3.84A4.07,4.07,0,0,0,7.4,60a6.83,6.83,0,0,1,0-10.56A3.9,3.9,0,0,0,7.4,43a6.83,6.83,0,0,1,0-10.56,3.88,3.88,0,0,0,1.68-3.2A3.93,3.93,0,0,0,7.4,26a6.82,6.82,0,0,1,0-10.55,4.12,4.12,0,0,0,1.68-3.2A7.15,7.15,0,0,0,6.92,8.31C5.46,6.56,3.22,3.89,6,1.23A4,4,0,0,1,8.74,0c1.69,0,3.3,1.24,4.48,2.14a7.73,7.73,0,0,0,4.13,2.08,4.58,4.58,0,0,0,3.52-1.64,7.44,7.44,0,0,1,10.86,0,4.54,4.54,0,0,0,3.46,1.63,4.53,4.53,0,0,0,3.46-1.64,7.45,7.45,0,0,1,10.87,0A4.5,4.5,0,0,0,53,4.22a4.55,4.55,0,0,0,3.47-1.64,7.45,7.45,0,0,1,10.87,0,4.6,4.6,0,0,0,3.46,1.64A7.86,7.86,0,0,0,75,2.12C76.15,1.23,77.77,0,79.46,0a3.91,3.91,0,0,1,2.75,1.23c2.77,2.65.53,5.33-1,7.1a7.06,7.06,0,0,0-2.14,3.82,4.07,4.07,0,0,0,1.69,3.27,6.83,6.83,0,0,1,0,10.56,3.9,3.9,0,0,0,0,6.43,6.82,6.82,0,0,1,0,10.55,3.91,3.91,0,0,0,0,6.44,7,7,0,0,1,2.49,5.27,7.56,7.56,0,0,1-2.72,5.4c-1.37,1.41-1.81,2-1.45,3.21a11.49,11.49,0,0,0,2.62,4.24c1.32,1.54,3.34,3.9.47,6.65a3.91,3.91,0,0,1-2.75,1.23c-1.69,0-3.31-1.24-4.49-2.14a7.66,7.66,0,0,0-4.13-2.08,4.58,4.58,0,0,0-3.52,1.64,7.44,7.44,0,0,1-10.86,0,4.48,4.48,0,0,0-6.92,0,7.44,7.44,0,0,1-10.85,0,4.49,4.49,0,0,0-6.94,0,7.44,7.44,0,0,1-10.86,0,4.56,4.56,0,0,0-3.47-1.63,7.66,7.66,0,0,0-4.21,2.11A8,8,0,0,1,8.73,75.4Zm62.05-7.23a10.08,10.08,0,0,1,6,2.68c1.5,1.14,2.15,1.52,2.61,1.52a1,1,0,0,0,.73-.37,2,2,0,0,0,.52-.66.31.31,0,0,0,0-.28,8,8,0,0,0-1.2-1.59,14.49,14.49,0,0,1-3.2-5.32A5.78,5.78,0,0,1,78.35,58c1.21-1.23,1.92-2.05,1.92-3.35a4.12,4.12,0,0,0-1.7-3.22,6.83,6.83,0,0,1,0-10.56,3.9,3.9,0,0,0,0-6.43,6.82,6.82,0,0,1,0-10.55,4.12,4.12,0,0,0,1.68-3.2,4.09,4.09,0,0,0-1.7-3.22,7,7,0,0,1-2.49-5.28,9.4,9.4,0,0,1,2.84-5.81c1.68-2,1.83-2.39,1.2-3A1,1,0,0,0,79.38,3c-.47,0-1.09.36-2.58,1.5a10.21,10.21,0,0,1-6,2.71,7.49,7.49,0,0,1-5.41-2.37,4.46,4.46,0,0,0-3.46-1.63A4.51,4.51,0,0,0,58.4,4.89,7.44,7.44,0,0,1,53,7.25a7.51,7.51,0,0,1-5.44-2.37,4.48,4.48,0,0,0-6.92,0A7.45,7.45,0,0,1,35.2,7.25a7.47,7.47,0,0,1-5.44-2.37,4.49,4.49,0,0,0-6.93,0,7.42,7.42,0,0,1-5.42,2.36,10.14,10.14,0,0,1-6-2.69C9.93,3.41,9.27,3,8.81,3A1.1,1.1,0,0,0,8,3.45c-.6.57-.45,1,1.22,2.94a9.45,9.45,0,0,1,2.86,5.88,7.05,7.05,0,0,1-2.5,5.26,4.13,4.13,0,0,0-1.69,3.2A4.12,4.12,0,0,0,9.63,24a6.82,6.82,0,0,1,0,10.55,3.9,3.9,0,0,0,0,6.43,7,7,0,0,1,2.49,5.27,7,7,0,0,1-2.51,5.28,3.87,3.87,0,0,0-1.68,3.2,3.91,3.91,0,0,0,1.7,3.22,7,7,0,0,1,2.49,5.27A9.37,9.37,0,0,1,9.28,69c-1.68,2-1.83,2.39-1.21,3a1,1,0,0,0,.75.38c.46,0,1.09-.36,2.58-1.5a10.12,10.12,0,0,1,6-2.7,7.41,7.41,0,0,1,5.41,2.37,4.5,4.5,0,0,0,6.9,0l0,0a7.44,7.44,0,0,1,10.87,0,4.48,4.48,0,0,0,6.92,0,7.44,7.44,0,0,1,10.86,0,4.49,4.49,0,0,0,6.93,0A7.41,7.41,0,0,1,70.78,68.17Z" />
<path id="rav-2" class="end-path" d="M44.11,60.84c-1.81,0-3.67-.06-5.52-.17a98.68,98.68,0,0,1-13.27-1.59,3.35,3.35,0,0,1-2.67-2.66,102.14,102.14,0,0,1-1.6-13.29,92.08,92.08,0,0,1,0-11,100.51,100.51,0,0,1,1.61-13.28,3.32,3.32,0,0,1,2.65-2.67,99.14,99.14,0,0,1,13.3-1.6h0A1.52,1.52,0,0,1,40,16.76a1.52,1.52,0,0,1-1.27.82,97.94,97.94,0,0,0-12.89,1.55.29.29,0,0,0-.23.24,93.12,93.12,0,0,0-1.57,12.9,86.49,86.49,0,0,0,0,10.68,96.23,96.23,0,0,0,1.55,12.9.31.31,0,0,0,.24.24,96.27,96.27,0,0,0,12.9,1.57c1.77.1,3.57.16,5.34.16s3.58-.06,5.35-.16a97.79,97.79,0,0,0,12.88-1.55.33.33,0,0,0,.24-.24A94.69,94.69,0,0,0,64.13,43a86.66,86.66,0,0,0,0-10.69A94.68,94.68,0,0,0,62.58,19.4a.28.28,0,0,0-.24-.24,94.73,94.73,0,0,0-12.89-1.58A1.52,1.52,0,0,1,48,16a1.48,1.48,0,0,1,1.49-1.43,100,100,0,0,1,13.38,1.6,3.36,3.36,0,0,1,2.67,2.66,102.14,102.14,0,0,1,1.6,13.29,92.08,92.08,0,0,1,0,11,100,100,0,0,1-1.6,13.26,3.34,3.34,0,0,1-2.65,2.67,99.14,99.14,0,0,1-13.3,1.6C47.77,60.78,45.93,60.84,44.11,60.84Z" />
<path id="rav-3" class="end-path" d="M49.08,53.46h0a1.51,1.51,0,0,1,0-3c2.29-.12,4.64-.33,7-.65a.28.28,0,0,0,.25-.25c.31-2.37.53-4.7.64-6.93a1.54,1.54,0,0,1,.82-1.27,1.62,1.62,0,0,1,.69-.16,1.51,1.51,0,0,1,.82.24,1.54,1.54,0,0,1,.69,1.35c-.13,2.69-.42,5.57-.86,8.55a1.51,1.51,0,0,1-1.27,1.27c-2.92.43-5.83.72-8.63.86l-.11,0Z" />
</g>
<g id="fusilli">
<path id="fus-1" class="end-path" d="M83.54,71.66a19,19,0,0,1-8.3-1.93,1,1,0,0,0-.45-.1,1,1,0,0,0-.44.1,18.83,18.83,0,0,1-16.61,0,1,1,0,0,0-.44-.1,1,1,0,0,0-.44.1,18.86,18.86,0,0,1-16.62,0,1,1,0,0,0-.88,0,18.86,18.86,0,0,1-16.62,0,1,1,0,0,0-.88,0A18.86,18.86,0,0,1,4.2,69.18a1.38,1.38,0,0,1-.4-2.07,15.92,15.92,0,0,0,3.45-10A16,16,0,0,0,2.53,45.76c-.19-.2-.39-.38-.59-.56a1.44,1.44,0,0,1-.44-.82,1.46,1.46,0,0,1,.26-1.05,1.43,1.43,0,0,1,.94-.55c.8-.1,2-.15,2.05-.15h0a19,19,0,0,1,8.36,1.93,1,1,0,0,0,.88,0,19.07,19.07,0,0,1,8.26-1.93h.11a18.94,18.94,0,0,1,8.25,1.93,1,1,0,0,0,.88,0,18.86,18.86,0,0,1,16.62,0,1,1,0,0,0,.88,0,18.83,18.83,0,0,1,16.61,0,1,1,0,0,0,.44.1,1,1,0,0,0,.45-.1,18.86,18.86,0,0,1,17.66.55,1.54,1.54,0,0,1,.29.23,1.3,1.3,0,0,1,.38.71,1.39,1.39,0,0,1-.27,1.13,16.12,16.12,0,0,0,1.27,21.36l.58.55a1.41,1.41,0,0,1,.42.7,1.43,1.43,0,0,1-.2,1.12,1.39,1.39,0,0,1-1,.59c-.8.11-2,.15-2.05.16ZM57.3,45.41a16,16,0,0,0-6.08,1.19,1,1,0,0,0-.55,1.3l7.59,18.7a1,1,0,0,0,.47.52,16.22,16.22,0,0,0,7.32,1.76,16,16,0,0,0,6.07-1.19,1,1,0,0,0,.55-1.3L65.08,47.68a1,1,0,0,0-.47-.51,16.17,16.17,0,0,0-7.31-1.76Zm-49.18.37a1,1,0,0,0-.85,1.52A18.88,18.88,0,0,1,10,57.14a18.54,18.54,0,0,1-2.47,9.35,1,1,0,0,0-.07.84,1,1,0,0,0,.6.59,15.9,15.9,0,0,0,5.46,1,16.06,16.06,0,0,0,6.08-1.19,1,1,0,0,0,.55-1.3l-7.59-18.7a1,1,0,0,0-.48-.52A16.54,16.54,0,0,0,8.34,45.8Zm31.68-.37a16.06,16.06,0,0,0-6.08,1.19,1,1,0,0,0-.55,1.3l7.59,18.7a1,1,0,0,0,.48.52,16.07,16.07,0,0,0,13.38.57,1,1,0,0,0,.55-1.3L47.58,47.68a1,1,0,0,0-.47-.51,16.14,16.14,0,0,0-7.31-1.76Zm-17.5,0a16.06,16.06,0,0,0-6.08,1.19,1,1,0,0,0-.55,1.3l7.59,18.7a1,1,0,0,0,.48.52,16.09,16.09,0,0,0,13.39.57,1,1,0,0,0,.55-1.3l-7.6-18.71a1,1,0,0,0-.47-.51,16.24,16.24,0,0,0-7.27-1.76Zm52.49,0a16,16,0,0,0-6.07,1.19,1,1,0,0,0-.55,1.31L75.76,66.6a1,1,0,0,0,.47.52A16.54,16.54,0,0,0,80,68.49l.23,0A1,1,0,0,0,81.08,67a19,19,0,0,1-.3-19.19,1,1,0,0,0,.07-.84,1,1,0,0,0-.6-.6A16.09,16.09,0,0,0,74.79,45.41Z" />
<path id="fus-3" class="end-path" d="M66,32.66a19,19,0,0,1-8.3-1.93,1,1,0,0,0-.88,0,18.86,18.86,0,0,1-16.62,0,1,1,0,0,0-.88,0,18.86,18.86,0,0,1-16.62,0,1,1,0,0,0-.88,0A18.86,18.86,0,0,1,4.2,30.18,1.33,1.33,0,0,1,3.9,30a1.45,1.45,0,0,1-.38-.71,1.43,1.43,0,0,1,.28-1.13,15.92,15.92,0,0,0,3.45-10A16,16,0,0,0,2.53,6.75c-.19-.19-.39-.37-.59-.55a1.47,1.47,0,0,1-.41-.7,1.36,1.36,0,0,1,.2-1.12,1.4,1.4,0,0,1,1-.6c.8-.1,2-.14,2.05-.15h0a19,19,0,0,1,8.35,1.93,1,1,0,0,0,.88,0,18.86,18.86,0,0,1,16.62,0,1,1,0,0,0,.88,0,18.86,18.86,0,0,1,16.62,0,1,1,0,0,0,.88,0,18.83,18.83,0,0,1,16.61,0,1,1,0,0,0,.45.1,1,1,0,0,0,.44-.1,18.86,18.86,0,0,1,17.66.55,1.4,1.4,0,0,1,.4,2.07,16.12,16.12,0,0,0,1.26,21.35c.2.2.39.38.59.56a1.36,1.36,0,0,1,.44.82A1.37,1.37,0,0,1,86.58,32a1.39,1.39,0,0,1-.93.55c-.83.1-2,.15-2.05.15h0a19,19,0,0,1-8.35-1.93,1,1,0,0,0-.44-.1,1,1,0,0,0-.45.1,19,19,0,0,1-8.26,1.93ZM57.3,6.41A16,16,0,0,0,51.22,7.6a1,1,0,0,0-.55,1.3l7.59,18.71a1,1,0,0,0,.47.51A16.27,16.27,0,0,0,66,29.88a16.08,16.08,0,0,0,6.12-1.19,1,1,0,0,0,.55-1.3L65.08,8.68a1,1,0,0,0-.47-.51A16.21,16.21,0,0,0,57.3,6.41Zm-17.5,0A16.06,16.06,0,0,0,33.72,7.6a1,1,0,0,0-.55,1.3l7.59,18.71a1,1,0,0,0,.47.51,16.11,16.11,0,0,0,13.4.57,1,1,0,0,0,.54-1.3L47.58,8.68a1,1,0,0,0-.47-.51A16.17,16.17,0,0,0,39.8,6.41Zm-17.5,0A16.06,16.06,0,0,0,16.22,7.6a1,1,0,0,0-.55,1.3l7.6,18.71a1,1,0,0,0,.47.51,16.09,16.09,0,0,0,13.39.57,1,1,0,0,0,.55-1.3L30.09,8.68a1,1,0,0,0-.48-.51A16.14,16.14,0,0,0,22.3,6.41ZM8.12,6.78A1,1,0,0,0,7.27,8.3,18.89,18.89,0,0,1,10,18.15a18.53,18.53,0,0,1-2.47,9.34,1,1,0,0,0-.07.84,1,1,0,0,0,.6.59,15.9,15.9,0,0,0,5.46,1,16.06,16.06,0,0,0,6.08-1.19,1,1,0,0,0,.55-1.31L12.59,8.69a1,1,0,0,0-.48-.52A16.54,16.54,0,0,0,8.34,6.8Zm66.67-.37A16,16,0,0,0,68.72,7.6a1,1,0,0,0-.55,1.3l7.59,18.7a1,1,0,0,0,.47.52A16.54,16.54,0,0,0,80,29.49l.22,0A1,1,0,0,0,81.08,28a19,19,0,0,1-.3-19.19A1,1,0,0,0,80.85,8a1,1,0,0,0-.59-.59,15.94,15.94,0,0,0-5.46-1Z" />
</g>
</svg>
<a class="menu__open">Menu</a>
</div>
<div class="menu__items">
<a data-destination="spaghetti"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/pasta-spaghetti.png" /><span>Spaghetti</span></a>
<a data-destination="penne"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/pasta-penne.png" /><span>Penne</span></a>
<a data-destination="fusilli"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/pasta-fusilli.png" /><span>Fusilli</span></a>
<a data-destination="farfalle"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/pasta-farfalle.png" /><span>Farfalle</span></a>
<a data-destination="ravioli"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/pasta-ravioli.png" /><span>Ravioli</span></a>
</div>
</nav>
<main>
<div class="pasta spaghetti">
<img class="pasta__background" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/pasta-spaghetti.png" />
<div class="pasta__info">
<small>Recipes for</small>
<h2 data-splitting>Spaghetti</h2>
<div class="pasta__info__recipes">
<a target="_blank" href="https://www.bonappetit.com/recipe/bas-best-bolognese"><span>BA's Best Bolognese</span></a>
<a target="_blank" href="https://www.bonappetit.com/recipe/white-pesto-pasta"><span>White Pesto Pasta</span></a>
<a target="_blank" href="https://www.bonappetit.com/recipe/shrimp-scampi-pasta"><span>Shrimp Scampi</span></a>
</div>
</div>
<figure class="pasta__dish">
<div class="pasta__dish__container">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/pasta-dish-spaghetti.png" alt="Spaghetti Bolognese" />
</div>
</figure>
</div>
<div class="pasta penne">
<img class="pasta__background" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/pasta-penne.png" />
<div class="pasta__info">
<small>Recipes for</small>
<h2 data-splitting>Penne</h2>
<div class="pasta__info__recipes">
<a target="_blank" href="https://www.saltandlavender.com/easy-pasta-arrabiata-recipe/"><span>Penne Arrabiata</span></a>
<a target="_blank" href="https://www.forkintheroad.co/simple-lemon-arugula-spicy-penne/"><span>Simple Lemon Arugula Spicy Penne
</span></a>
<a target="_blank" href="https://www.honeyandbirch.com/penne-aglio-e-olio/"><span>Penne Aglio e Olio</span></a>
</div>
</div>
<figure class="pasta__dish">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/pasta-dish-penne.png" alt="Spaghetti Bolognese" />
</figure>
</div>
<div class="pasta fusilli">
<img class="pasta__background" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/pasta-fusilli.png" />
<div class="pasta__info">
<small>Recipes for</small>
<h2 data-splitting>Fusilli</h2>
<div class="pasta__info__recipes">
<a target="_blank" href="https://www.forkintheroad.co/vegan-fusilli-pasta-salad/"><span>Vegan Fusilli Pasta Salad</span></a>
<a target="_blank" href="https://goodyfoodies.blogspot.com/2012/06/recipe-fusilli-pasta-carbonara-italian.html"><span>Fusilli Carbonara</span></a>
<a target="_blank" href="https://cookidoo.co.uk/recipes/recipe/en-GB/r247597"><span>Pasta alla Genovese</span></a>
</div>
</div>
<figure class="pasta__dish">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/pasta-dish-fusilli.png" alt="Fusilli Pasta Salad" />
</figure>
</div>
<div class="pasta farfalle">
<img class="pasta__background" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/pasta-farfalle.png" />
<div class="pasta__info">
<small>Recipes for</small>
<h2 data-splitting>Farfalle</h2>
<div class="pasta__info__recipes">
<a target="_blank" href="https://www.budgetbytes.com/mushroom-and-spinach-pasta-with-ricotta/"><span>Mushroom & Spinash Pasta with Ricotta</span></a>
<a target="_blank" href="https://www.budgetbytes.com/spicy-sausage-broccoli-pasta/"><span>Spicy Saucy and Broccoli Pasta</span></a>
<a target="_blank" href="https://www.budgetbytes.com/zesty-tomato-artichoke-pasta/"><span>Zesty Tomato Artichoke Pasta</span></a>
</div>
</div>
<figure class="pasta__dish">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/pasta-dish-farfalle.png" alt="Fusilli Pasta Salad" />
</figure>
</div>
<div class="pasta ravioli">
<img class="pasta__background" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/pasta-ravioli.png" />
<div class="pasta__info">
<small>Recipes for</small>
<h2 data-splitting>Ravioli</h2>
<div class="pasta__info__recipes">
<a target="_blank" href="https://www.goodhousekeeping.com/food-recipes/easy/g739/ravioli-recipes/?slide=2/"><span>Ravioli with Brown Butter and Spinash</span></a>
<a target="_blank" href="https://www.goodhousekeeping.com/food-recipes/a3382/ravioli-zucchini-lasagna/"><span>Ravioli and Zucchini Lasagna</span></a>
<a target="_blank" href="http://www.garnishandglaze.com/2016/06/17/toasted-ravioli-recipe/"><span>Toasted Ravioli</span></a>
</div>
</div>
<figure class="pasta__dish">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/pasta-dish-ravioli.png" alt="Fusilli Pasta Salad" />
</figure>
</div>
</main>
</div>
Splitting();
gsap.registerPlugin(CustomEase);
function pastafarfalle() {
$(".main-1").css("opacity", 1);
$(".main-2").css("opacity", 1);
$(".main-3").css("opacity", 0);
gsap.to("svg .main-2", {
duration: 0.6,
ease: "expo.out",
morphSVG: "#far-2"
});
gsap.to("svg .main-1", {
duration: 0.6,
ease: "expo.out",
morphSVG: "#far-1"
});
}
function pastaspaghetti() {
$(".main-1").css("opacity", 1);
$(".main-2").css("opacity", 1);
$(".main-3").css("opacity", 1);
gsap.to(".main-1", { duration: 0.6, ease: "expo.out", morphSVG: "#spa-1" });
gsap.to(".main-2", { duration: 0.6, ease: "expo.out", morphSVG: "#spa-2" });
gsap.to(".main-3", { duration: 0.6, ease: "expo.out", morphSVG: "#spa-3" });
}
function pastafusilli() {
$(".main-1").css("opacity", 1);
$(".main-2").css("opacity", 0);
$(".main-3").css("opacity", 1);
gsap.to(".main-3", { duration: 0.6, ease: "expo.out", morphSVG: "#fus-3" });
gsap.to(".main-1", { duration: 0.6, ease: "expo.out", morphSVG: "#fus-1" });
}
function pastapenne() {
$(".main-1").css("opacity", 1);
$(".main-2").css("opacity", 0);
$(".main-3").css("opacity", 1);
gsap.to(".main-3", { duration: 0.6, ease: "expo.out", morphSVG: "#pen-1" });
gsap.to(".main-1", { duration: 0.6, ease: "expo.out", morphSVG: "#pen-3" });
}
function pastaravioli() {
$(".main-1").css("opacity", 1);
$(".main-2").css("opacity", 1);
$(".main-3").css("opacity", 1);
gsap.to(".main-1", { duration: 0.6, ease: "expo.out", morphSVG: "#rav-1" });
gsap.to(".main-2", { duration: 0.6, ease: "expo.out", morphSVG: "#rav-2" });
gsap.to(".main-3", { duration: 0.6, ease: "expo.out", morphSVG: "#rav-3" });
}
$(".menu__items a").on("click", function () {
var pastaChosen = $(this).data("destination");
var currentPasta = $(".body-clone").attr("data-pasta");
if (pastaChosen !== currentPasta) {
eval("pasta" + pastaChosen + "()");
swapContent(pastaChosen);
}
closeMenu();
$(".menu").toggleClass("active");
});
function swapContent(item) {
const tl = new TimelineMax({ paused: true });
tl
.add("swap-out")
.to(".pasta__background", {
css: {
opacity: 0,
},
ease: Quad.easeInOut,
duration: 0.1
})
.to(
"h2 .char",
{
css: { translateY: "-100%", opacity: 0 },
ease: Quad.easeInOut,
stagger: 0.03
}
)
.to(".pasta__dish", {
css: {
opacity: 0,
translateX: "25% ",
translateY: "-10%",
rotate: "45deg",
transformOrigin: "center center"
},
ease: Quad.easeInOut,
duration: 0.5
}, "-=1.5")
.to(
".pasta__info__recipes a span",
{
css: { translateY: "100%", opacity: 0 },
ease: "power4.out",
duration: 0.5
},
"swap-out"
)
.add("swap-out-complete")
.add(test)
.add("swap-in")
.to("h2 .char", {
css: { translateY: 0, opacity: 1 },
ease: Quad.easeInOut,
duration: 1,
stagger: 0.01
}, "swap-in")
.to(
".pasta__background",
{
css: { opacity: 0.3 },
ease: Quad.easeInOut,
duration: .5
},
"swap-in"
)
.to(
".pasta__info__recipes a span",
{
css: { translateY: "0", opacity: 1 },
ease: "power4.out",
duration: 1
},
"swap-in+=0.4"
)
.to(
".pasta__dish",
{
css: {
opacity: 1,
translateX: 0,
translateY: 0,
rotate: 0,
transformOrigin: "center center"
},
ease: Quad.easeInOut,
duration: 0.8
},
"swap-in+=0.45"
);
tl.restart();
tl.tweenTo("swap-out-complete");
function test() {
$(".body-clone").attr("data-pasta", item);
tl.resume();
}
}
$(".menu__link").on("click", function () {
$(".menu").toggleClass("active");
if ($(".menu").hasClass("active")) {
openDatMenu();
} else {
closeMenu();
}
});
function openDatMenu() {
TweenMax.to(".menu__items", {
css: { scale: 1, opacity: 1, zIndex: 10, visibility: "visible" },
ease: Quad.easeInOut,
duration: 0.2
});
TweenMax.to(".menu__items a", {
css: { backgroundPosition: "-100% 0" },
ease: Quad.easeInOut,
duration: 0.5,
stagger: 0.2,
delay: 0.2
});
TweenMax.to(".menu__items a span", {
css: { opacity: 1, translateX: "20%" },
ease: Quad.easeInOut,
duration: 0.3,
stagger: 0.2,
delay: 0.4
});
TweenMax.to(".menu__items a img", {
css: { opacity: 0.4, translateX: "-20%" },
ease: Quad.easeInOut,
duration: 0.3,
stagger: 0.2,
delay: 0.5
});
}
function closeMenu() {
TweenMax.to(".menu__items", {
css: { scale: 0, opacity: 0, zIndex: -1, visibility: "hidden" },
ease: Quad.easeInOut,
duration: 0.4,
delay: 0.5
});
TweenMax.to(".menu__items a", {
css: { backgroundPosition: "0" },
ease: Quad.easeInOut,
duration: 0.5
});
TweenMax.to(".menu__items a span", {
css: { opacity: 0, translateX: "-20%" },
ease: Quad.easeInOut,
duration: 0.3
});
TweenMax.to(".menu__items a img", {
css: { opacity: 0, translateX: "20%" },
ease: Quad.easeInOut,
duration: 0.2
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.2.2/dist/gsap.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase3.min.js"></script>
<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
$yellow: #ffd862;
* {
box-sizing: border-box;
}
body {
font-family: "Gotu", sans-serif;
background: $yellow;
display: grid;
place-items: center;
height: 100vh;
}
h1,
h2 {
font-family: "Baloo 2", cursive;
}
a {
cursor: pointer;
color: #222;
}
img {
width: 100%;
}
main {
position: relative;
@media (min-width: 680px) {
min-height: 100vh;
max-height: calc(100vh - 20%);
overflow-y: hidden;
overflow-x: hidden;
}
}
.menu {
display: flex;
position: relative;
background: #fff;
cursor: pointer;
height: 100vh;
@media (min-width: 680px) {
height: 90vh;
}
&__link {
display: flex;
padding: 1.35rem;
text-align: center;
margin: auto;
position: relative;
z-index: 3;
height: 100%;
justify-content: center;
flex-direction: column;
&__shape {
width: 140%;
transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
margin: 0 0 1rem -15%;
.end-path {
visibility: hidden;
}
}
}
&__open {
font-size: 1.5rem;
line-height: 1.1;
text-transform: uppercase;
word-break: break-all;
}
&__items {
min-width: 100%;
z-index: 5;
position: absolute;
height: 100%;
z-index: 0;
left: 3.95rem;
display: flex;
flex-direction: column;
justify-content: space-evenly;
visibility: hidden;
width: 19.3rem;
a {
width: 100%;
height: 100%;
background-size: 200% 100%;
background-image: linear-gradient(to right, transparent 50%, #f8f8f8 50%);
display: flex;
position: relative;
align-items: center;
padding: 1rem;
font-size: 1.8rem;
letter-spacing: -0.05rem;
overflow: hidden;
&:nth-child(even) {
background-image: linear-gradient(to right, transparent 50%, #f4f4f4 50%);
}
span {
opacity: 0;
transform: translateX(-20%);
position: relative;
}
img {
opacity: 0;
transform: translateX(20%);
position: absolute;
width: 80%;
right: -10%;
}
}
}
&.active svg.menu__link__shape {
transform: rotate(90deg);
}
}
.pasta {
position: absolute;
left: 0;
top: 0;
width: 100%;
font-size: 1.4rem;
visibility: hidden;
overflow: hidden;
@media (min-width: 680px) {
display: grid;
grid-template-columns: 1fr 33rem;
height: 100vh;
}
h2 {
font: 3rem / 1.2 "Gotu", sans-serif;
letter-spacing: -0.1rem;
margin-bottom: 3rem;
margin-left: 1rem;
@media (min-width: 680px) {
font: 5rem / 1.2 "Gotu", sans-serif;
margin-left: 3rem;
overflow: hidden;
white-space: nowrap;
}
.char {
display: inline-block;
}
}
&__background {
opacity: 0.35;
position: absolute;
top: 2%;
max-width: 34rem;
left: -10%;
}
&__info {
padding: 2rem;
position: relative;
small {
display: block;
text-transform: uppercase;
font: 1rem "Gotu";
margin: 0.5rem 0 0.5rem 1.5rem;
@media (min-width: 680px) {
margin-top: 6rem;
margin-left: 3.5rem;
}
}
&__recipes a {
display: block;
margin: 1.6rem 0;
font-size: 1.3rem;
line-height: 1.3;
overflow-y: hidden;
padding: 0 0 0 1rem;
transition: 0.3s ease-in-out;
&:before {
content: "";
background: #222;
height: 0.15rem;
width: 0;
transition: 0.3s ease-in-out;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-100%);
}
&:hover {
transform: translateX(2rem);
&:before {
width: 2.4rem;
}
}
&:active {
&:before {
width: 85%;
}
}
@media (min-width: 680px) {
font-size: 1.5rem;
padding: 0 0 0 3rem;
}
span {
display: inline-block;
}
}
}
&__dish {
text-align: right;
position: relative;
@media (min-width: 680px) {
&:before {
content: "";
position: absolute;
width: 60vh;
height: 60vh;
left: 15%;
top: 15%;
background: transparent;
border-radius: 50%;
box-shadow: 0 0px 100px rgba(0, 0, 0, 0.5);
}
}
img {
margin: -2rem -10rem 0 0;
@media (min-width: 680px) {
margin: 3rem 0 0 2.5rem;
width: 100%;
height: 75vh;
object-fit: contain;
position: relative;
}
}
}
&.penne .pasta__dish:before {
box-shadow: 0 0px 30px rgba(0, 0, 0, 0.3);
}
}
.spaghetti {
.pasta__background {
transform: rotate(20deg);
}
}
.body-clone {
max-width: 60rem;
background: $yellow;
max-height: 100vh;
overflow: hidden;
width: 100%;
display: grid;
grid-template-columns: min-content 1fr;
background-size: cover;
background-position: 13rem;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg transform='translate(300,300)'%3E%3Cpath d='M171.3,-205.3C215.2,-167.2,239.6,-106.9,247.9,-45.8C256.2,15.3,248.5,77.2,216.3,117.5C184.2,157.8,127.7,176.6,70.6,200.1C13.5,223.6,-44.2,251.8,-80.6,233.4C-117,215,-132.1,150,-124.8,101.6C-117.5,53.3,-87.8,21.5,-74.8,-6.5C-61.9,-34.4,-65.6,-58.6,-56,-102.7C-46.3,-146.8,-23.1,-210.9,20.2,-235C63.6,-259.2,127.3,-243.3,171.3,-205.3Z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E");
@media (min-width: 680px) {
height: 90vh;
width: 95%;
box-shadow: 0 10px 55px rgba(0, 0, 0, 0.15);
border-radius: 2rem;
background-position: 20rem;
}
&[data-pasta="ravioli"] {
.menu.active svg.menu__link__shape {
transform: rotate(45deg);
}
}
}
[data-pasta="spaghetti"] {
.spaghetti {
visibility: visible;
}
}
[data-pasta="penne"] {
.penne {
visibility: visible;
}
}
[data-pasta="fusilli"] {
.fusilli {
visibility: visible;
}
}
[data-pasta="farfalle"] {
.farfalle {
visibility: visible;
}
}
[data-pasta="ravioli"] {
.ravioli {
visibility: visible;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css" rel="stylesheet" />
@stanwmusic
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment