I want to basically create a website where based on the color chosen in a color picker, the colors of the SVGs on the page accordingly.
I have managed to use some custom code and create a basic prototype on webflow. It can be viewed here: https://karthiks-dapper-project-8bd007.webflow.io/design-illustrations/test-design-page-copy (color picker in the bottom-right). To do this, among other things, I had to add the SVG through a Html embed element. Also, because the SVG code had more than 10,000 characters, I had to use the solution given in this link in point 2b: How to embed files hosted on Github.
Now, I want to be able to add different SVGs to the page based on a CMS collection. But making it custom, I just wanted to serve the same SVG using the CMS. So, I just moved the HTML embed element into the collection items. However, instead of showing up in its respective grids, all six SVGs are now showing up in the first grid itself. Here is that link: https://karthiks-dapper-project-8bd007.webflow.io/design-illustrations/test-design-page
I am unable to understand the reason behind this. Can someone help me with this? I have shared a read-only link here: https://preview.webflow.com/preview/karthiks-dapper-project-8bd007?utm_medium=preview_link&utm_source=dashboard&utm_content=karthiks-dapper-project-8bd007&preview=41dcb31194f684938af99015b253d576&pageId=5e6c8caf52125013051476cd&mode=preview