How to embed a paramoji
Every paramoji is generated on demand by a single endpoint. Append query parameters to
shape the facial expression and drop the URL into an
<img> tag, a CSS background-image, or any place that accepts an image URL.
- Endpoint:
https://paramoji.org/paramoji.svg.php - Method:
GET - Response: a standalone SVG image (
Content-Type: image/svg+xml) - Every parameter is optional and independent; combine them with
&. - Emotional, overlay and color values are integers from
0to100; a higher value means more of that quality. - With no parameters the endpoint returns a neutral face.
Minimal example
<img src="https://paramoji.org/Parameters
| Parameter | Range | Default | Meaning |
|---|---|---|---|
| Emotional | |||
v |
0–100 | 50 | Valence (pleasure): the axis from bad to good, misery to pleasure, disagreement to agreement. |
a |
0–100 | 50 | Arousal: the axis from calm to excited, inactive to active, sleepy to alarmed. |
d |
0–100 | 50 | Dominance: the axis from weakness to strength, fear to anger, submission to assertion. |
o |
0–100 | 50 | Control: the axis from uncontrolled to controlled, expressed to suppressed. Splits the arousal between the eyes and the mouth. |
g |
0–100 | 0 | Disgust: from neutral to disgusted, repelled, sickened. |
c |
0–100 | 0 | Contempt: from neutral to smug, vain, disdainful. |
a1, a2 |
0–100 | 50 | Advanced: set the eye arousal (a1) and mouth arousal (a2) directly, in place of a and o. |
| Overlays | |||
b |
0–100 | 0 | Blush from absent to maximum cheek blushing. |
t |
0–100 | 0 | Tears from absent to maximum tear size. |
| Animation | |||
blink_rate |
≥ 0 | 0 | Eye blinks per minute; 0 disables the blink animation. |
speak_rate |
≥ 0 | 0 | Mouth movements per minute; 0 disables the talking animation. |
| Color | |||
invert |
0–100 | 0 | Tints the background and recolors the lines through the color palette. Colors are computed dynamically to match the viewer's light or dark mode. |
| Rendering | |||
size |
px or % | 100% | Width and height of the image, e.g. 100, 200 or 50%. Set this when the surrounding layout does not size the image. |
Examples
| Expression | Query string | |
|---|---|---|
| Joy | ?v=95&a=70 |
|
| Sadness | ?v=10&a=25&d=25 |
|
| Anger | ?v=15&a=85&d=95 |
|
| Fear | ?v=20&a=95&d=15 |
|
| Surprise | ?v=70&a=95 |
|
| Talking and blinking | ?v=70&speak_rate=140&blink_rate=15 |
|
| Colored badge | ?v=85&invert=100 |
|
| Small size | ?v=70&size=50 |
|
The source code is licensed as MIT and can be accessed here:
