top of page
your-ikebana.png

Emoji Ikebana

Project Type: Individual Project
Time: March, 2024

Tools: HTML, CSS, JavaScript

An emoji ikebana website where users can craft customized ikebana arrangements using a variety of emoji flowers, as well as utilize these emojis as pen tools to draw on the website canvas. 

Design Process
Screenshot 2024-04-12 at 2.49.52 AM.png

All of the coding process was conducted and hosted on Replit. 

On HTML side, I created a set of buttons with emoji flowers as the thumbnails. I also added an "Undo", a "Reset", and a "Save" button for more functionality, which users get to "undo" their actions, reset the whole canvas, and save the current Emoji Ikebana as an image to their devices. On CSS side, the website style is very simple and minimal. I kept the background white and added the hover/active effects to the buttons. On JavaScript side, I calculated the position of mouse click / touch events, and applied to the tilting angles of the emoji flowers. I also added a randomly curved stem from the emoji flower to the vase using the Cubic Bézier curve, so that it looks like we are virtually making the Ikebana and putting the emoji flowers into the vase.

Screenshot 2024-04-12 at 2.37.40 AM.png
Screenshot 2024-04-12 at 2.38.26 AM.png

Live Site

(Works on both mobile and desktop)

bottom of page