Open Peeps: Facial Hair Components
Relevant source files
The following files were used as context for generating this wiki page:
The Facial Hair component is a key customizable feature within the Open Peeps avatar style. It provides a collection of SVG-based facial hair styles that can be applied to an avatar, primarily based on gender-specific configurations. This system allows for a variety of moustaches, beards, and goatees to be programmatically selected and rendered as part of the final SVG avatar.
The facial hair module is designed to be modular, with each style defined as a separate function returning an SVG string. The selection is influenced by a probability setting, making its appearance optional and configurable. This contributes to the diversity and personalization of the generated avatars.
Architecture and Integration
The facial hair system is built around a ComponentGroup which maps style names to functions that generate SVG markup. This group is then consumed by the main Open Peeps style generator, which selects a component based on provided options and integrates it into the final SVG structure.
Sources: packages/avatar/src/open-peeps/components/facialHair.ts:3, packages/avatar/src/open-peeps/types.ts:88-89, packages/avatar/src/open-peeps/index.ts:13,40
Component Definition
The core of the module is the facialHair constant, which is of type ComponentGroup. This object acts as a dictionary where keys are the names of the facial hair styles (e.g., chin, full, moustache1) and values are functions. These functions return a string of SVG <path> or <g> elements that draw the facial hair.
Most style functions are simple and take no arguments. However, some styles like full4 and moustache9 accept a colors object to allow for dynamic coloring, typically using the headContrast color.
Sources: packages/avatar/src/open-peeps/components/facialHair.ts:3-4, packages/avatar/src/open-peeps/components/facialHair.ts:21-22, packages/avatar/src/open-peeps/components/facialHair.ts:74-75
Integration Flow
The create function in the main Open Peeps generator orchestrates the inclusion of the facial hair component. The getComponents utility is responsible for selecting a specific facial hair style based on the provided options and probability. The selected component's SVG markup is then embedded within a <g> element, which is positioned on the avatar canvas using a transform attribute.
The following diagram illustrates how the facial hair component is selected and rendered.
This diagram shows the logic flow from avatar creation to the conditional rendering of a facial hair component.
Sources: packages/avatar/src/index.ts:16, packages/avatar/src/index.ts:22-32, packages/avatar/src/config/gender.ts:5,18, packages/avatar/src/open-peeps/index.ts:13,40
Available Facial Hair Styles
The system provides a variety of facial hair styles. The available options are defined as a FacialHair type and are also enumerated in the style's JSON schema.
Sources: packages/avatar/src/open-peeps/types.ts:47-66, packages/avatar/src/open-peeps/schema.ts:101-124, packages/avatar/src/open-peeps/components/facialHair.ts
| Style Name | Description |
|---|---|
chin | A small patch of hair on the chin. |
full | A full beard style. |
full2 | An alternative full beard style. |
full3 | An alternative full beard style. |
full4 | A full beard style that uses a contrast color. |
goatee1 | A goatee and moustache combination. |
goatee2 | An alternative goatee style. |
moustache1 | A simple moustache. |
moustache2 | A more complex, handlebar-style moustache. |
moustache3 | A wide, bushy moustache. |
moustache4 | A neatly trimmed moustache. |
moustache5 | A curly, styled moustache. |
moustache6 | A thin, wide moustache. |
moustache7 | A complex moustache with sideburn connectors. |
moustache8 | A very large, stylized moustache. (Note: This style is in the schema but not implemented in facialHair.ts) |
moustache9 | A moustache style that uses a contrast color. |
Configuration and Selection
The selection of facial hair is primarily driven by gender configuration and a probability setting. These can be overridden through the OpenPeepsOptions.
Gender-Based Configuration
By default, facial hair is configured differently for male and female avatars.
- Male: Has a
facialHairProbabilityof 10% and a list of 15 possible facial hair styles. - Female: Has a
facialHairProbabilityof 0%, effectively disabling facial hair.
This diagram shows the relationship between the configuration objects.
This diagram shows how MALE_CONFIG and FEMALE_CONFIG are partial implementations of the OpenPeepsOptions interface.
Sources: packages/avatar/src/config/gender.ts:4-17, packagesg/avatar/src/config/gender.ts:19-21, packages/avatar/src/open-peeps/types.ts:3-5
Schema and Defaults
The JSON schema for the Open Peeps style defines the configurable properties related to facial hair, including their types and default values.
| Property | Type | Description | Default Value |
|---|---|---|---|
facialHair | array | An array of facial hair styles to choose from. | All 16 styles |
facialHairProbability | integer | A percentage chance (0-100) of showing facial hair. | 10 |
Sources: packages/avatar/src/open-peeps/schema.ts:100-129
SVG Rendering
The selected facial hair component is a function that returns an SVG string. This string is then injected into the main SVG body.
Positioning
The facial hair graphics are positioned абсолютное to the avatar's head using a <g> element with a translate transform.
// packages/avatar/src/open-peeps/index.ts:40
<g transform="translate(279 400)">${components.facialHair?.value(colors) ?? ''}</g>
Sources: packages/avatar/src/open-peeps/index.ts:40
Component Examples
Most components are simple functions returning a static SVG path.
// packages/avatar/src/open-peeps/components/facialHair.ts:4-5
export const facialHair: ComponentGroup = {
chin: () =>
`<path fill-rule="evenodd" clip-rule="evenodd" d="M209.6 138s-44.4 6.6-64.3-2.6c-19.8-9.2-39-18.1-57-30.3A145 145 0 0 1 43 59c-10.4-17.7-19-36.4-27.7-55L8.2-11.5C5.4-17.2-2.5-15.4-2.5-6.7S-2.9 68 12.4 94c13.7 23.4 37 39.8 60 54.1 25.7 15.8 59.6 32.9 90.2 37.4 27.6 4 59-7.4 79-26.3 21-19.7 27-46.6 37.7-72.3 2.4-5.7-6.1-9.2-8.6-3.5-4.7 10.6-61.1 54.8-61.1 54.8Z" fill="#000"/>`,
Sources: packages/avatar/src/open-peeps/components/facialHair.ts:4-5
Some components can accept colors for more dynamic rendering, using the headContrast color property.
// packages/avatar/src/open-peeps/components/facialHair.ts:74-75
moustache9: (colors) =>
`<g fill-rule="evenodd" clip-rule="evenodd"><path d="..." fill="${xml(colors.headContrast)}"/><path d="..." fill="#000"/></g>`,
Sources: packagesavatar/src/open-peeps/components/facialHair.ts:74-75
Summary
The facial hair component system is a flexible and integral part of the Open Peeps avatar style. It offers a wide range of predefined styles that are applied based on configurable, gender-specific probabilities. The architecture allows for easy extension with new styles and ensures that facial hair is correctly positioned and rendered within the final SVG avatar.