Open Peeps: Face Components

Relevant source files

The following files were used as context for generating this wiki page:

• packages/avatar/src/open-peeps/components/face.ts
• packages/avatar/src/open-peeps/types.ts
• packages/avatar/src/open-peeps/index.ts
• packages/avatar/src/open-peeps/schema.ts
• packages/avatar/src/open-peeps/utils/getComponents.ts
• packages/avatar/src/index.ts

The "Face" component is a fundamental part of the Open Peeps avatar style, responsible for defining the avatar's facial expression and emotion. It consists of a collection of predefined SVG path data, where each element corresponds to a specific emotion. The system is designed to be modular, allowing for easy selection and rendering of different faces based on user-provided options.

The selection of a face is determined by the face property within the OpenPeepsOptions. This is typically derived from a numeric emotion option passed to the main createAvatar function. The chosen face component is then rendered within a specific <g> (group) element in the final SVG, positioned correctly to align with the head component.

Architecture and Integration

The face component is one of several modular parts (like head, facial hair, and accessories) that are combined to create a complete Open Peeps avatar. The integration process involves selecting a specific face SVG function based on options and injecting its output into the main SVG structure.

The create function in packages/avatar/src/open-peeps/index.ts orchestrates this assembly. It calls getComponents to retrieve the selected parts, including the face, and then places the face's SVG content inside a <g> element with a translate(315 248) transform to position it correctly on the avatar's head.

Sources: packages/avatar/src/open-peeps/index.ts:16-18, 41

Data Flow

The following diagram illustrates the flow from a user calling createAvatar to the final rendering of the face component.

This diagram shows the sequence of function calls across different modules to select and render the face component.

Sources: packages/avatar/src/index.ts:18-28, packages/avatar/src/open-peeps/index.ts:16-18, packages/avatar/src/open-peeps/utils/getComponents.ts:12-17

Component Definition

The face components are defined in packages/avatar/src/open-peeps/components/face.ts. The core export is a face object that conforms to the ComponentGroup type.

ComponentGroup Structure

A ComponentGroup is a JavaScript object where keys are the names of the component variants (e.g., 'smile', 'angryWithFang') and values are functions. Each function, when called, returns a string of SVG path data for that specific face emotion.

// From: packages/avatar/src/open-peeps/types.ts
export type ComponentGroup = Record<string, ComponentGroupItem>
type ComponentGroupItem = (colors: ColorPickCollection) => string

The face object in face.ts is a concrete implementation of this type.

// From: packages/avatar/src/open-peeps/components/face.ts
import type { ComponentGroup } from '../types'

export const face: ComponentGroup = {
  angryWithFang: () =>
    `<path ... />`,
  awe: () =>
    `<g ...>...</g>`,
  // ... and so on for all other emotions
}

Sources: packages/avatar/src/open-peeps/components/face.ts:3-5, packages/avatar/src/open-peeps/types.ts:869-871

Type Relationships

The diagram below shows the relationship between the main configuration options and the types that define the face components.

This diagram illustrates that OpenPeepsOptions can specify an array of FaceEmotion enums, which correspond to keys in a ComponentGroup object.

Sources: packages/avatar/src/open-peeps/types.ts:2-4, 59-90, 869-871

Available Face Emotions

The FaceEmotion type defines all possible values for the face component. These string literals are used as keys to retrieve the corresponding SVG data from the face component group.

Emotion Name
angryWithFang
awe
blank
calm
cheeky
concerned
concernedFear
contempt
cute
cyclops
driven
eatingHappy
explaining
eyesClosed
fear
hectic
lovingGrin1
lovingGrin2
monster
old
rage
serious
smile
smileBig
smileLOL
smileTeethGap
solemn
suspicious
tired
veryAngry

Sources: packages/avatar/src/open-peeps/types.ts:59-90, packages/avatar/src/open-peeps/schema.ts:53-93

Configuration and Schema

The available face options are formally defined in a JSON schema, which is used for validation and can inform tooling. The schema specifies that the face property is an array of strings, with an enum listing all valid emotion names.

// From: packages/avatar/src/open-peeps/schema.ts
{
  "face": {
    "type": "array",
    "items": {
      "type": "string",
      "enum": [
        "angryWithFang",
        "awe",
        "blank",
        "calm",
        "cheeky",
        "concerned",
        "concernedFear",
        "contempt",
        "cute",
        "cyclops",
        "driven",
        "eatingHappy",
        "explaining",
        "eyesClosed",
        "fear",
        "hectic",
        "lovingGrin1",
        "lovingGrin2",
        "monster",
        "old",
        "rage",
        "serious",
        "smile",
        "smileBig",
        "smileLOL",
        "smileTeethGap",
        "solemn",
        "suspicious",
        "tired",
        "veryAngry"
      ]
    },
    "default": [
      // ... all enum values
    ]
  }
}

This schema ensures that only valid face emotions can be requested when generating an avatar.

Sources: packages/avatar/src/open-peeps/schema.ts:53-93