Hey there Creative Coders! This month, our Creative Coding Club theme is What Grows in the Garden of Your Mind? and I've come up with a fun interactive SVG project for you all to build.

Please feel free to use any or all of the assets provided. Also - get creative! My storyboards are just a guideline - if you would like to add some animation or interactivity to it please go wild! Or, if you would like to focus on only one or two of the succulent SVGs that's rad too!

What are you waiting for? Download the Assets!

Drag and Drop Succulent Garden

Who doesn't love a succulent garden these days? These hip mini-succulent gardens are all the rage! Give the user 5 different terrarium shapes to choose from.

When the user clicks on the terrarium, the other terrariums disappear and the clicked one grows to full-size.

The original container shrinks, as the "plant drawer" grows in.

Use something like jQuery UI to build in drag-and-drop functionality for the succulents.

You will notice that the terrarium SVGs are split into two: the terrarium "frame" and the terrarium "soil". This is because the succulent SVG has to be placed in-between these two SVGs.

HOT TIP: You will need to disable pointer events on the terrarium frame in order to drag elements underneath it.

The user will likely want to increase/decrease the size of their succulents, and also re-arrange the order of them inside their terrarium. To give them those options, use JavaScript to scale the succulents and change the z-index.

The completed project should look similar to this:

Use any technology you want to execute the above.

Or, follow the step-by-step tutorial here: Project Solution


5,860 4 102