A unicode characters based visual editor

Sometimes creating temporary creative for a logo should be a matter of minutes, using unicodeist it is!

I created the following in more or less 3 minutes, using 3 different symbols.

Clicking here you could download exactly that creative and import it in unicodeist (the 100% HUMAN CODED badge is another example).... but I'm sure You can do way better than that.

One thing to notice here is that most of the times the size comparison is quite relevant:

example	.jpeg	.png	.json	embed script	embed html
500x350	160 KB	44 KB	459 B	546 B	1 KB
500 x 250	63 KB	40 KB	1.1 KB	1.2KB	2.5 KB
	10 KB	3 KB	1.4 KB	1.5 KB	3.5KB

Seems clear (and quite obvious also the reason) that whenever few elements can potentially compose the creative then the benefits of using one of the unicodeist embedding options grow proportionally to the image size, cause the exported image can only grow while the embedding html or script remains unchanged.

... aaaand ... yes I have definitely a bold palette preference!

༺ TRY IT HERE ༻

---

• In the top right you can:

  • start a new creative
  • change the background-color (default is white)
  • toggle background transparency
  • open the background styles editor
  • open the keyFrames editor
  • toggle navigation blocker
  • toggle full screen
  • switch 🌓 theme
  • set the size of the current creative
  • hover the speed dial button to:
    • contribute to the project
    • get the content as <div> usable in a html page or a <script> that will automatically render the creative exactly where you put the script.
    • export either:
      1. .json file of the current creative (afterward importable)
      2. .png or .jpeg of the current creative
    • import one of the exported .json files

  ---

• Press the ➕ button on the top left (or if fullscreen is not active press ESC button) to toggle the symbol selection panel

• Add one or more symbols and close the panel (through ➖ button or pressing ESC, again the latter only if u are not in fullscreen mode)

• Last symbol added is the current target one, thus on the right panel you will see a tuning card expanded allowing you to:

  • select the symbol for one of the bulk actions (see below, this checkbox is visible only when more than one symbol is added)

  • set a label for it (only useful to search it among added symbols)

  • set the z-index

  • see a preview showing on its left some icons to:

    • thrash it
    • isolate that from others (useful to be sure to change the right symbol)
    • clone it (when clicked, the clone will be found on the symbol list bottom)
    • bring it to the top (z-index)
    • move it to the bottom (z-index)
    • center it horizontally ...almost
    • center it vertically ...almost
    • open an additional styles editor
    • swap the symbol into a different one

  • change the font-family

  • toggle italic style

  • change the font-weight

  • change the color

  • tune scale, scaleX, scaleY, rotationX, rotationY, rotationZ, skewX, skewY, blur and opacity

  • move to a different location:

    • using the range inputs
    • drag the symbol
    • when focused press ⇧ + arrow (1px move each)

all range fields can be tuned either moving the range handle either just clicking on the value and scroll up/down or just type the exact value and blur or hit enter buttons (if a range is focused then the scrolling on the symbols list is disabled).

Bulk actions

When more than one symbol is added, then you will see a checkbox (for both expanded and collapsed ones). Then when more than one symbol is selected an additional speed dial menu will appear allowing to:

1. trash the selected symbols
2. equally space them horizontally (when min. 3 symbols selection)
3. equally space them vertically (min. 3 symbols also here)
4. align horizontally respect image center
5. align vertically respect image center
6. center horizontally respect selection bounding-box
7. center vertically respect selection bounding-box

2 and 3 use as boundaries the most left/top one and the most right/bottom one;
4 and 5 align on the mean vertical/horizontal position;
6 and 7 center moving the mid point between min & max left / top distance;

Move | scale all symbols

To move all symbols together just go to the unicodeist logo in the right upper part and drag within the logo, on mouse release all symbols will move together in that direction for an amout proportional to the movement.
If you do the same with the shift key down then all symbols will be up or down scaled depending on the movement direction. Notice that the relative position of all the elements will not change.
When some symbols are selected then only those will be moved or scaled.
In case one needs to move faster instead of using shift use the  and every movement will be 10px in the arrowing direction.

Zoom

Sometimes it might be useful to zoom-in or zoom-out the creative, use

• + to zoom in
• - to zoom out
• 0 to reset the zoom

Undos

Most of the relevant changes piles up in a history and undos are available, either clicking on the undo icon on the bottom left corner of the screen either using the z shortcut.

---

༺ ᚗᚌ ༻