Hello,
This tutorial is really interesting. I tried it but it doesnβt work. I think the issue is from the svg vector.
This is my code. #vectorlogo is the svg and sectionCALENDRIER is the section i want to change the color
Thank you for your help ![]()
const menuItems = {
color : {
black : β#413a38β ,
white : β#ebe0d5β
},
setItemsColor : ( colors ) => {
return {
vectorlogo : '
< g >
< path fill = β${color}β d = βM55.02 106.27C22.62 106.27 0 84.42 0 53.14c0-15.47 5.29-28.74 15.29-38.4C25.29 5.1 39.02 0 55.02 0c28.28 0 46.62 14.89 50.31 40.85l.08.57H79.2l-.11-.35C75.6 29.85 67.28 23.92 55.01 23.92c-16.05 0-27.7 12.29-27.7 29.23s11.65 29.23 27.7 29.23c12.25 0 20.58-6.01 24.08-17.39l.11-.35h26.21l-.08.57c-3.7 26.11-22.04 41.08-50.31 41.08ZM55.02 1C39.29 1 25.8 6 15.99 15.46 6.18 24.92 1 37.95 1 53.14S6.18 81.3 15.99 90.77c9.82 9.49 23.31 14.5 39.03 14.5 37.48 0 46.96-24.57 49.24-39.65H79.94c-3.71 11.61-12.32 17.74-24.92 17.74-16.63 0-28.7-12.71-28.7-30.23S38.39 22.9 55.02 22.9c12.62 0 21.23 6.05 24.92 17.51h24.32C101.98 25.42 92.5 1 55.02 1Zβ></ path >
< path fill = β${color}β d = βM215.54 102.98h-28.45l-5.52-15.39h-45.82l-5.52 15.39h-28.45l37.96-99.69h37.82l37.98 99.69Zm-27.75-1h26.3L176.87 4.29h-36.44l-37.22 97.69h26.3l5.52-15.39h47.23l5.52 15.39Zm-12.21-34.25h-33.85l14.22-39.54h5.52l14.1 39.54Zm-32.43-1h31.01l-13.39-37.54h-4.11l-13.5 37.54Zβ></ path >
< path fill = β${color}β d = βM303.2 102.98h-83.01V3.29h27.55v76.49h55.46v23.21Zm-82.01-1h81.01V80.77h-55.46V4.29h-25.55v97.69Zβ></ path >
< path fill = β${color}β d = βM823.91 115.68h-1.03c-1.12 0-2.15.42-3.08 1.25-2.15 1.95-6.33 4.41-12.56 7.36-6.22 2.96-13.12 5.77-20.69 8.46-11.13 3.96-19.48 5.93-25.05 5.93-4.05 0-6.18-.9-6.37-2.71l-.07-.88c0-1.71.59-3.74 1.76-6.08 2.93.49 5.61.73 8.06.73 4.74 0 8.59-.88 11.57-2.64 3.37-1.85 5.79-4.15 7.25-6.88 1.46-2.73 2.2-5.44 2.2-8.13 0-2.2-.4-4.14-1.18-5.83 18.47-.12 31.77-4.07 39.49-11.77 5.13-5.11 7.73-11.83 7.73-19.97 0-23.38-21.17-27.01-39.84-30.22-1.37-.23-2.72-.47-4.04-.7l-10.7-1.88c-8.42-1.4-12.51-4.58-12.51-9.73 0-6.48 6.63-10.19 18.18-10.19 12.66 0 19.85 4.41 21.36 13.1l.07.41h24.65v-.5C829.11 11.39 814.19 0 783.49 0c-28.69 0-45.15 11.23-45.15 30.81 0 23.86 21.66 27.52 39.07 30.45l12.34 2.12c10.41 1.66 14.85 4.75 14.85 10.32 0 2.16-.81 4.07-2.42 5.66-3.31 3.28-9.62 5.01-18.27 5.01h-.54c-14.2 0-22.04-4.59-22.65-13.28l-.03-.46h-24.93v.49c-.15 10.02 2.6 17.96 8.17 23.62 4.95 5.03 12.12 8.37 21.67 10.11-.71.51-1.43 1.05-2.17 1.65-4.81 3.93-8.97 8.66-12.49 14.17-2.2 3.42-3.67 6.71-4.44 9.88-4.31 4.24-7.58 7.12-11.43 10.5-10.53 9.26-17.72 12.73-20.17 12.73-.54 0-.82-.51-.84-1.54-.03-1.03-.04-1.71-.04-2.05 0-6.64 1.44-15.99 4.32-28.05 1.95-8.45 2.93-14.28 2.93-17.5 0-2.68-.56-4.7-1.68-6.04-.22-.27-.45-.5-.69-.71 1.51-1.03 2.89-2.15 4.12-3.38 5.13-5.11 7.73-11.83 7.73-19.97 0-23.38-21.17-27.01-39.84-30.22-1.37-.23-2.72-.47-4.04-.7l-10.7-1.88c-8.42-1.4-12.51-4.58-12.51-9.73 0-6.48 6.63-10.19 18.18-10.19 12.66 0 19.85 4.41 21.36 13.1l.07.41h24.65v-.5C727.92 11.41 713 .02 682.3.02c-28.69 0-45.15 11.23-45.15 30.81 0 23.86 21.66 27.52 39.07 30.45l12.34 2.12c10.41 1.66 14.85 4.75 14.85 10.32 0 2.16-.81 4.07-2.42 5.66-3.38 3.35-9.85 5.1-18.82 5-14.2 0-22.04-4.59-22.65-13.28l-.03-.46h-24.93v.49c-.15 10.02 2.6 17.96 8.17 23.62 7.66 7.77 20.55 11.54 39.43 11.54h.5c9.07 0 16.9-.92 23.47-2.73-2.11 2.42-4.73 5.56-7.89 9.43l-.66.73c-9.52 11.57-15.58 18.8-18.16 21.68 1.32-7.52 3.42-14.23 6.3-20.14.29-.63.44-1.29.44-1.98 0-1.9-.88-3.3-2.64-4.17-.68-.29-1.34-.44-1.98-.44-1.86 0-3.25.88-4.17 2.64-.82 1.73-1.57 3.54-2.28 5.38-.17.13-.34.25-.5.41-5.13 5.18-11.55 9.38-19.26 12.6-8.5 3.52-16.36 5.27-23.58 5.27-6.54 0-10.21-1.54-10.99-4.61-.15-.49-.22-1.05-.22-1.68 0-3.32 2.25-8.25 6.74-14.79.54-.83.81-1.68.81-2.56 0-1.56-.63-2.83-1.9-3.81-.83-.59-1.73-.88-2.71-.88-1.56 0-2.78.66-3.66 1.98-3.61 5.08-5.92 9.24-6.92 12.49-.39 1.28-.69 2.44-.93 3.54-6.75 1.11-14.04 3.5-21.89 7.19-8.67 4.08-23.44 13.96-28.52 17.43 1.39-12.76 4.28-28.18 8.67-46.25h58.63v-1.12c.76.51 1.55.78 2.38.78 1.51 0 2.76-.63 3.74-1.9.78-1.03 1.51-2 2.2-2.93.68-.93 1.03-1.9 1.03-2.93 0-1.37-.63-2.56-1.9-3.59-.88-.63-1.83-.95-2.86-.95-1.37 0-2.56.64-3.59 1.9l-.99 1.34V80.51h-52.71c1.76-6.23 3.53-12.12 5.31-17.68h45.28V43.38h-38.48c1.52-3.95 3.04-7.68 4.57-11.17.29-.63.44-1.29.44-1.98 0-1.85-.9-3.22-2.71-4.1-.31-.14-.61-.25-.92-.32h39.21V3.29H542.8v60.76c-2.16 4.39-4.24 9.03-6.23 13.95-.75.03-1.47.05-2.18.08V3.29h-26.85v62.04h-1.58L464.53 3.29H433.1v99.69h26.85V40.94h1.7l41.91 61.82.15.22h23.78c-.36 1.12-.72 2.23-1.06 3.36-1.33 4.28-2.32 7.45-3.11 10.09-1.44.14-2.97.21-4.59.21-5.81 0-14.79-1.03-26.95-3.08-2.59-.49-4.88-.83-6.88-1.03 0-1.37-.49-2.44-1.46-3.22-.98-.78-2.03-1.17-3.15-1.17h-.37c-4.3.54-7.96 2.31-10.99 5.31-3.03 3-5.25 6.48-6.67 10.44-1.12 3.17-1.68 6.2-1.68 9.08 0 1.07.1 2.1.27 3.09-.13.08-.26.18-.39.26-3.99 2.44-7.36 3.9-10.1 4.36-1.25.21-2.46.27-3.61.17-6.64-.6-12.62-5.3-17.94-14.1-2.4-3.9-4.3-7.36-5.71-10.39l-.1-.13c-1.25-2.66-2.34-4.58-3.29-5.75-2.13-2.31-4.32-3.27-6.59-2.89-3.71.63-7.54 4.73-11.5 12.29-2.36 4.46-4.6 9.31-6.73 14.52 1.18-6.44 2.68-13.16 4.51-20.16 1.03-3.85 2.07-7.59 3.12-11.25h22.18V3.29h-34.58L368.5 68.15h-1.28L345.6 3.29h-34.58v99.69h26.38V48.82h1.38l18.56 54.16h21.04l18.56-54.16h1.38v36.66a481.25 481.25 0 0 0-4.07 13.15c-12.15 34.4-30.37 37.47-35.67 37.6-.22-.03-.45-.07-.68-.07H4.76c-2.49 0-4.5 2.01-4.5 4.5s2.01 4.5 4.5 4.5h351.73c.38.03.9.06 1.56.06 4.79 0 16.52-1.45 28.03-14-2.37 12.7-2.94 22.7-1.69 30.01.56 3.27 2.33 4.65 5.31 4.14l.29-.05c1.47-.4 2.79-1.78 3.97-4.13 1.18-2.36 2.47-5.39 3.87-9.09 6.57-17.81 11.83-29.17 15.8-34.06l1.15 2.4c1.62 3.39 3.78 7.29 6.5 11.71 2.71 4.42 6.1 8.38 10.17 11.9 6.2 5.28 12.89 7.31 20.06 6.08 3.27-.56 6.74-1.85 10.41-3.86 1.19-.64 2.41-1.39 3.65-2.24 1.64 1.07 3.68 1.68 6.12 1.83 3.47-.1 6.67-1.56 9.59-4.39 4.93-4.93 7.49-10.64 7.69-17.14 0-.73-.03-1.44-.07-2.12.39.2.88.32 1.46.37 5.86 1.08 11.39 1.88 16.59 2.42 5.2.54 9.07.81 11.61.81.75 0 1.47-.01 2.16-.03-.78 3.2-1.59 6.89-2.86 12.79-3.37 15.55-3.32 14.67-4.69 25.37v.59c0 1.03.29 1.95.88 2.78.88 1.17 2.12 1.76 3.74 1.76.98 0 1.88-.29 2.71-.88.98-.78 1.56-1.81 1.76-3.08 1.37-10.4 1.28-9.24 4.58-24.52s3.29-15.18 8.37-31.44c2.37-7.55 4.91-14.89 7.62-22.01V103h18.03c-5.94 24.54-8.93 42.82-8.93 54.82.05 3.08 1.56 4.61 4.54 4.61h.15c1.76-.19 5-1.98 9.74-5.35 27.46-17.2 33.76-21.2 45.9-23.21 1.37 3.77 4.01 6.5 7.96 8.19 3.37 1.42 7.28 2.12 11.72 2.12h1.68c8.01-.39 16.47-2.44 25.38-6.15 4.26-1.78 8.18-3.82 11.77-6.12-.57 2.85-1.04 5.79-1.41 8.83l-.07 1.68c0 3.71 1.66 5.74 4.98 6.08h.22c3.61 0 10.06-5.32 19.34-15.97 5.91-6.74 11.72-13.7 17.43-20.87v.15c-3.12 13.14-5.18 23.85-6.15 32.15-.15 1.56-.22 3.05-.22 4.47 0 3.37.44 6.28 1.32 8.72 1.27 3.42 3.86 5.37 7.76 5.86h.29c4.3 0 12.12-4.39 24.68-14.35 3.77-3.01 4.72-4.05 8.39-7.21 1.7 3.03 4.93 5.07 9.7 6.11 1.17.2 2.46.29 3.88.29 2.98 0 6.45-.41 10.4-1.25 5.76-1.17 11.84-2.88 18.24-5.13 8.15-2.88 15.65-6.01 22.49-9.38 10.35-5.03 15.53-8.64 15.53-10.84v-1.1c0-1.12-.44-2.15-1.32-3.08-.88-.93-1.66-1.39-2.34-1.39Zm-79.25-21.66c-5.37-5.44-7.95-12.78-7.9-22.41h23.01c.64 6.38 5.34 13.75 23.6 13.75 9.22.1 15.96-1.75 19.53-5.29 1.8-1.79 2.71-3.93 2.71-6.37 0-6.17-4.69-9.55-15.69-11.3l-12.34-2.12c-20.92-3.53-38.24-8.18-38.24-29.47C739.34 11.86 755.43 1 783.49 1c29.8 0 44.4 10.9 44.62 33.31h-22.82C803.09 23.16 792 20.8 783.02 20.8c-12.19 0-19.18 4.08-19.18 11.19 0 5.63 4.49 9.24 13.34 10.71l10.69 1.88c1.33.24 2.68.47 4.05.71 18.28 3.14 39.01 6.7 39.01 29.23 0 7.87-2.5 14.35-7.43 19.27-7.61 7.58-20.83 11.44-39.31 11.48-.53-.91-1.18-1.74-1.96-2.48-1.71-1.46-3.66-2.2-5.86-2.2-2.9 0-6.1 1.15-9.59 3.44-9.83-1.65-17.14-4.96-22.12-10.01Zm28.78 16.46c1.07-.63 1.83-.95 2.27-.95.59 0 .93.76 1.03 2.27 0 3.08-1.51 5.47-4.54 7.18-1.95 1.08-4.57 1.61-7.84 1.61l-1.98-.07c3.52-4.3 7.2-7.64 11.06-10.03Zm-90.72-5.21h-.5c-18.6 0-31.26-3.68-38.72-11.25-5.37-5.44-7.95-12.78-7.9-22.41h23.01c.64 6.38 5.34 13.75 23.6 13.75 9.22.1 15.96-1.75 19.53-5.29 1.8-1.79 2.71-3.93 2.71-6.37 0-6.17-4.69-9.55-15.69-11.3l-12.34-2.12c-20.92-3.53-38.24-8.18-38.24-29.47C638.18 11.86 654.27 1 682.33 1c29.8 0 44.4 10.9 44.62 33.31h-22.82c-2.2-11.15-13.29-13.51-22.27-13.51-12.19 0-19.18 4.08-19.18 11.19 0 5.63 4.49 9.24 13.34 10.71l10.69 1.88c1.33.24 2.68.47 4.05.71 18.28 3.14 39.01 6.7 39.01 29.23 0 7.87-2.5 14.35-7.43 19.27-1.26 1.25-2.69 2.4-4.25 3.45-.71-.44-1.47-.67-2.28-.67-1.76 0-3.74.98-5.93 2.93-.68.7-1.51 1.59-2.45 2.65-6.77 2.07-15.01 3.13-24.7 3.13Zm-279.92-3.29c.44-1.53.89-3.04 1.33-4.54.16-.52.33-1.03.49-1.56h-.02c2.65-8.79 5.36-17 8.14-24.62 4.64-12.7 7.91-20.3 9.19-22.45.87-1.63 1.46-2.9 1.75-3.79v56.95h-20.89Zm-6.58-54.16-18.56 54.16h-19.61l-18.56-54.16h-3.09v54.16h-24.38V4.29h32.86l21.62 64.86h2.72l21.62-64.86h32.86v37.53c-.22-.59-.55-1.13-1.01-1.61-.95-.93-2.18-1.6-4.21-1.42-.88.08-1.6.48-2.34 1.35-1.85 2.2-6 12.79-11.17 26.4-1.93 5.08-3.81 10.37-5.64 15.87v-34.6h-3.09Zm82.18 82c-.95 2-2.14 3.66-3.55 4.98-1.17 1.22-2.17 1.83-3 1.83-1.42 0-2.12-1.25-2.12-3.74 0-1.81.39-3.76 1.17-5.86 1.32-3.71 3.42-6.54 6.3-8.5.29.64.76 1.27 1.39 1.9.83.93 1.25 2.1 1.25 3.52 0 1.9-.48 3.86-1.43 5.86Zm25.83-27.84-41.91-61.82-.15-.22h-3.23v62.04h-24.85V4.29h29.9l41.33 61.81.15.22h3.12V4.29h24.85v73.83c-8.63.31-13.44.47-14.4.47-6.45.22-9.93.32-11.65.34-1.15.2-2.08.69-2.77 1.51-.76.9-1.13 1.97-1.13 3.19s.51 2.37 1.54 3.3c.88.73 1.88 1.1 3 1.1h.03c.57.05 3.39.04 11.49-.2l13.4-.51c-1.82 4.81-3.53 9.7-5.14 14.68h-23.57Zm123.67-20.5v13.46l-.28.38c-.59.83-.88 1.71-.88 2.64 0 1.22.39 2.24 1.16 3.07v.95h-57.39c.32-1.3.64-2.62.98-3.95 1.47-5.76 2.94-11.27 4.42-16.55h51.99Zm-57.51-13.79v-4.9h1.5c-.5 1.6-1 3.24-1.5 4.9Zm55.4-23.34V61.8h-43.96c2.02-6.24 4.05-12.05 6.1-17.45h37.86Zm-41.26-15.97c-2.03 4.61-4.04 9.61-6.03 14.97h-8.11V25.79h17.2c-1.38.29-2.4 1.15-3.06 2.59ZM543.84 4.29h84.06v20.5h-58.51v19.56h8.74c-1.99 5.43-3.97 11.24-5.93 17.45h-2.82v9.24c-.63 2.15-1.27 4.36-1.9 6.59-.8-.57-1.7-.88-2.69-.88h-.37c-4.69.29-10.6.59-17.72.88 4.44-10.45 9.25-19.46 14.43-27.03.54-.83.81-1.68.81-2.56 0-1.61-.66-2.9-1.98-3.88-.83-.54-1.71-.81-2.64-.81-1.46 0-2.71.66-3.74 1.98-3.42 5.03-6.67 10.62-9.76 16.73V4.29Zm0 97.69V86.9c8.79-.33 15.86-.66 21.19-.99.07 0 .13-.03.2-.04-.87 3.24-1.73 6.56-2.59 9.96-.53 2.1-1.03 4.14-1.53 6.15h-17.27Zβ></ path >
</ g >
</ svg > β
}
$w . onReady ( function () {
});
export function sectionCALENDRIER_viewportEnter ( event ) {
animateMenuElements ( menuItems . color . white )
}
export function sectionCALENDRIER_viewportLeave ( event ) {
animateMenuElements ( menuItems . color . black )
}
asyncfunctionanimateMenuElements ( color ){
$w ( β#vectorlogoβ ). src = menuItems . setItemsColor ( color ). vectorlogo ;
}