Application
SVG product ingredients
Description
SVG product ingredients is JavaScript library that visualises product ingredients as SVG object. Product's image is placed in the middle and surrounded by ingredients circles with some text descriptions. Circles (ingredients) can be clicked and configured to place them precisely on given coord.
This library was used on client company website to advertise Bio Products.
Technologies
Library was written in JavaScript without any frameworks and can be easily integrated to other code thanks to built-in events system (Event Emmiter). Webpack was used to bundle whole code with Snap.svg library that helps draw SVG elements using friendly API.
There is a demo on GitHub where library is integrated with basic slider module to present hot to implement this in JS app.
Stylings done on demo github version done by BulmaCSS.
Released
11/2017
Screens & Screencasts
