/ Avatar shapes designed by Sondra Eby at OddBird
svg xmlns="http://www.w3.org/2000/svg" style="display:none"
symbol#icon-avatar-0 viewBox="0 0 100 100"
title avatar-0
path d="M94.6-11.9c1.8-4.1 16.2-38.7 19.7-40.2 1-.3 6.7 2 6.3 2.5C111.3-40.3 90.4 2.9 89 6.2c-.9-1.8 4.7-16.1 5.6-18.1z"
path d="M26.1 17.1c1.7-1.6 3.2-.5 5.1-.2 1.9.4 4-1.8 5.9-2.3 3.1-.7 2.6 4.6 2.4 6.4-1.3-1-2.8-1.8-4.2-2.5-2.8 2.4-2.8 7-2.4 10.3.3 2.5.7 6.7 3.7 7.3 2.1-.7 3.5-2.3 4.4-4.3 1.2-2.7 1.9-5.4 3.4-8 2.9-5.1 6.6-9.9 11-13.7 7.5-6.6 17.8-6 26.2-10.5 5.7-3 10.4-8.1 14.6-12.9-3 8.6-5.9 17.3-9.6 25.6-3.5 7.8-8.3 14.4-14 20.6-4.8 5.3-10.7 10.2-18.1 11.2-4 .5-8-.2-11.8-1.2-4-1-7.8-2.5-10.9-5.3-4.7-4.2-12.1-14.8-5.7-20.5-.2.2-.6.5-.9.8.4-.3.7-.6.9-.8 1.8-1.6-2.1 2 0 0z"
path d="M97.6-7.2c-1.2 6-1.8 12.1-2.6 18.1-.8 6.1-2.2 12-4.1 17.8-1.6 5-4.9 9.3-10.1 10.9-4.6 1.4-9.6 1.5-14.4 1.9C88.6 29.6 96.9-5 97.6-7.2zM17.3 30.1c1.7 5 4.1 9.9 7.9 13.7 4.2 4.2 9.1 6.1 14.7 7.7C51.3 54.7 62.8 60 69 70.6c2.9 5 11.7 25.8-1.2 24-5-.7-9.8-4-14-6.6-5.4-3.2-10.7-6.8-15.3-11.1C27.4 66.8 21.2 54 17.7 39.6c1 17.5 11.5 34.1 24.7 45.1 6.6 5.5 14.3 11.4 23.1 12.6 8.5 1.2 17.6-5.6 21.7-12.6 2.5-4.3 3.5-9.5 3.7-14.5.1-3.1-.4-8.4-4.4-8.7 2.6-.2 5.2-.5 7.7-1.1 3.8 13.9-3 31.2-16 37.4-7.5 4-16.2 6.3-24.7 5.8-7-.4-13.6-3.5-19-7.8-12.1-9.6-20.1-24.9-22.1-40.1-.7-5-.7-10.1 0-15.1.5-4.3 1.4-7.6 4.9-10.5"
symbol#icon-avatar-1 viewBox="0 0 100 100"
title avatar-1
path d="M79.2 4c-29 3-43.7 2.3-57.6 27.6C7.8 56.9 26.9 61 29.1 95.7 57.7 71 56.1 20.8 79.2 4z"
path d="M29.1 95.1c12.2-5.4 44.1.9 60-23.2s-6.5-48.7-2.7-64.2C62.1 22.6 59.6 72.8 29.1 95.1z"
symbol#icon-avatar-2 viewBox="0 0 100 100"
title avatar-2
path d="M74.7 90.7c.5-5.9.3-12-1.8-17.6-2.4-6.3-6.5-10.4-11.5-14.6C51.2 50 41.8 39.2 40.2 25.6c-.7-6.5-.2-31.9 12.3-24.1 4.8 3 8.2 8.6 11.4 13.1C68 20.4 71.7 26.5 74.5 33c6.7 15.5 7.2 31.4 4.2 47.8 7-18.4 3.9-40.2-4.7-57.5C69.8 14.6 64.6 5 56.1-.2c-8.2-5.1-20.6-2.3-28 2.9-4.6 3.2-7.9 8.2-10.4 13.2-1.5 3.1-3.4 8.8.5 10.9-2.7-1-5.5-1.8-8.4-2.4 2.5-16 17.4-30.6 33.5-31 9.5-.7 19.5 1 28 5.4 7 3.7 12.3 9.8 15.9 16.7 8 15.4 9.2 34.7 4.3 51.2-1.6 5.4-3.9 10.6-6.9 15.4-2.6 4.3-5 7.2-9.9 8.6"
symbol#icon-avatar-3 viewBox="0 0 100 100"
title avatar-3
path d="M20.3 20.6c-1.1-5-9.1-47-12.7-49.5-1-.6-8 .7-7.6 1.3 8.3 12.7 21.6 65.7 22.4 69.7 1.4-1.7-1.5-19-2.1-21.5z"
path d="M90.1 68.9c-1.5-2.1-3.4-1.3-5.6-1.4-2.3-.1-4-3-6.1-3.9-3.2-1.5-4 4.5-4.1 6.6 1.7-.8 3.5-1.3 5.3-1.8 2.5 3.3 1.5 8.4.3 12.1-.8 2.7-2.3 7.3-5.8 7.3-2.2-1.3-3.4-3.4-3.9-5.8-.7-3.3-.9-6.5-1.9-9.7-2-6.3-5.1-12.6-9.1-17.9-6.8-9.1-18.4-10.9-26.9-17.8-5.7-4.7-9.7-11.4-13.4-17.8 1.3 10.3 2.5 20.7 4.8 30.8 2.1 9.5 5.9 17.9 10.9 26.3 4.2 7 9.6 13.9 17.6 16.7 4.3 1.5 8.9 1.7 13.5 1.4 4.7-.2 9.3-1 13.4-3.4 6.2-3.7 16.9-13.8 11-21.8.3.4.6.8.8 1.2-.3-.4-.6-.8-.8-1.1-1.6-2.2 2 2.7 0 0z"
path d="M15.9 25.2c0 7-.8 13.9-1.3 20.8s-.3 14 .5 20.9c.7 5.9 3.3 11.5 8.8 14.5 4.8 2.7 10.4 3.9 15.6 5.5-22-18.5-23.3-59.1-23.6-61.7z"
symbol#icon-avatar-4 viewBox="5 -5 100 100"
title avatar-4
path d="M78.4 39.7c-3.1 4.3-5.6 9.1-6.4 14.4-1 5.9.4 10.9 2.4 16.4 4.1 11.1 6.5 23.6 1.6 34.8-2.3 5.3-14 24.7-20.2 13.1-2.4-4.5-2.5-10.3-2.9-15.2-.6-6.3-.7-12.6 0-18.9 1.7-14.9 8.4-27.4 18.1-38.8C57.4 56.6 50.1 74.8 48.9 92c-.6 8.6-.8 18.3 3.3 26.1 4 7.5 14.8 11 22.9 10.2 5-.5 9.7-2.8 13.9-5.5 2.6-1.7 6.5-5.2 4.5-8.7 1.7 2 3.5 3.9 5.4 5.6-9 11.2-27.1 15.9-39.7 9-7.6-3.7-14.6-9.4-19.2-16.6-3.8-5.9-5.1-13-4.8-20 .7-15.4 8.4-30.9 19.5-41.4 3.6-3.5 7.7-6.5 12.2-8.8 4-2.2 7.2-3.4 11.5-2.2"
path d="M82.8 16.7c-4.7-11-22.1-11.3-30.1-9.6-9.9 2.1-12.9 4.5-19.2 9.7-4.8 4-9.6 15.5-10.5 21.7 8.1-2.1 16.5 1.2 24.8.2s15.2-3.6 21.8-8.9c1.9-1.5 5-6.5 7.3-7.1 3.2-.8 6.3-.2 8.3 2.3s3.8 5.1 4.6 8.3c4 15.7 4.9 32.2 3.8 48.3-.6 8-1.7 16-3.1 23.9-.7 3.9-1.5 7.9-2.5 11.7-.8 3.1-2.5 6.4-2.2 9.7.2 2.4 4.2 3.2 6 4 5.1-25.3 7.9-51.5 5.4-77.3-.9-9.6-2.1-22.1-9.4-29.3-6.5-6.4-16.5-6.8-25.1-6.2-7.2.9-18.4.4-31.2 12.2C42 12.8 76.2 11.6 82.8 16.7z"
symbol#icon-avatar-5 viewBox="0 0 100 100"
title avatar-5
path d="M80.3 18.8C74.5 5.2 53.1 4.9 43.2 6.9c-12.2 2.5-15.9 5.5-23.7 12C13.6 23.8 7.7 38 6.6 45.6c10-2.6 20.3 1.4 30.5.3s18.8-4.5 26.8-11c2.3-1.9 6.1-8 9-8.7 3.9-1 7.7-.3 10.3 2.9 2.6 3.1 4.6 6.3 5.6 10.2 4.9 19.4 6.1 39.6 4.6 59.5-.7 9.9-2 19.7-3.9 29.5-.9 4.8-1.8 9.7-3.1 14.4-1 3.9-3 7.9-2.7 11.9.2 2.9 5.2 3.9 7.4 4.9 6.3-31.1 9.8-63.4 6.7-95.1-1.2-11.8-2.6-27.2-11.6-36.1-8-7.8-20.3-8.4-30.8-7.7-8.8 1.2-22.6.4-38.4 15.1C30.1 14 72.1 12.5 80.3 18.8z"
symbol#icon-avatar-6 viewBox="0 0 100 100"
title avatar-6
path d="M16.7 22.2c.5 5.3 1.7 10.6 4.5 15.2 3.1 5.1 7.4 8 12.5 10.9C44 54 54 61.9 57.6 73.6c1.7 5.5 5.4 27.9-6.8 23.1-4.7-1.9-8.6-6.2-12.1-9.7-4.5-4.4-8.8-9.1-12.3-14.4C18 60.1 14.9 46.2 14.9 31.3c-3.2 17.4 3.1 36 13.4 49.9 5.1 6.9 11.3 14.5 19.5 17.7 8 3.1 18.4-1.3 24.1-7.2 3.5-3.6 5.6-8.5 7-13.2.8-3 1.6-8.2-2.2-9.5 2.6.4 5.2.7 7.8.7.4 14.4-10.2 29.7-24.3 32.7-8.2 2.2-17.3 2.3-25.5-.2-6.7-2.1-12.4-6.6-16.7-12.1C8.4 77.9 4.3 61.2 5.8 45.9c.5-5 1.7-10 3.5-14.7 1.7-4.1 3.4-7.1 7.4-9"
path d="M58.1 63.4c-.5-5.3-1.7-10.6-4.5-15.2-3.1-5.1-7.4-8-12.5-10.9-10.3-5.8-20.3-13.7-23.9-25.4C15.5 6.4 11.8-16 24-11.2c4.7 1.9 8.6 6.2 12.1 9.7 4.5 4.4 8.8 9.1 12.3 14.4C56.9 25.3 59.9 39.2 60 54.1c3.1-17.3-3.2-35.9-13.5-49.7C41.4-2.5 35.2-10.1 27-13.3 19-16.4 8.6-12 2.9-6.1c-3.5 3.6-5.6 8.5-7 13.2-.8 3-1.6 8.2 2.2 9.5-2.6-.4-5.2-.7-7.8-.7C-10.1 1.5.6-13.8 14.7-16.8c8.2-2.2 17.3-2.3 25.5.2 6.7 2.1 12.4 6.6 16.7 12.1C66.4 7.6 70.6 24.4 69 39.6c-.5 5-1.7 10-3.5 14.7-1.7 4.1-3.3 7.1-7.4 9.1"
symbol#icon-avatar-7 viewBox="0 0 100 100"
title avatar-7
path d="M90.6-15.5c6.2-3.6 58.3-31.8 60.1-37.7.4-1.6-4.3-10.3-5-9.5-13.3 16.3-77.8 56.3-82.8 59 3 1.2 24.6-10 27.7-11.8z"
path d="M56.1 97.1c2.2-2.9.3-5.1-.5-8-.9-3 2.3-6.6 2.7-9.7.6-4.9-7.7-3.4-10.5-2.7 1.7 1.9 3.2 4 4.6 6.2-3.3 4.7-10.5 5.5-15.8 5.5-3.9 0-10.6 0-12.1-4.6.7-3.5 3-6 6-7.7 4-2.3 8.2-3.9 12.1-6.7 7.5-5.3 14.5-12 19.8-19.5C71.5 37 69 20.9 74.7 6.8c3.8-9.5 11-17.7 17.9-25.2-13.1 6-26.4 12-38.8 19.3-11.7 7.2-21.3 15.7-30.3 25.8C16 35.2 9.2 45.2 8.8 57c-.2 6.4 1.6 12.5 3.8 18.4 2.3 6.1 5.3 11.9 10.2 16.2 7.5 6.7 25.4 16.6 33.4 5.4-.4.5-.8 1.1-1.2 1.6.4-.5.8-1 1.1-1.5 2.3-3-2.7 3.8 0 0z"
path d="M82.6-19.4c-9.2 2.9-18.7 4.8-28.1 7.1-9.4 2.2-18.6 5.5-27.4 9.4C19.5.5 13.3 6.4 11.6 14.8c-1.5 7.5-.8 15.4-.6 23C26.1.9 79.3-17.9 82.6-19.4z"
symbol#icon-avatar-8 viewBox="0 0 100 100"
title avatar-8
path d="M15.5 19.3C6.8 38.6 1 47.7 11.9 65.6c10.9 18 20.5 7.4 43.2 18.7-5.1-27-37.4-44.4-39.6-65z"
path d="M54.7 84.1c1.1-9.7 16.7-27.5 7.2-46.3-9.4-18.8-33-13.7-41.4-21.7.5 20.7 31.3 40.6 34.2 68z"
path d="M54.7-44.6c-19.8 7.5-30.3 9.8-35.3 30.2-5 20.4 9.2 19.7 17.3 43.7 15.5-22.7 4.9-57.8 18-73.9z"
path d="M36.6 28.9c7.6-6.1 31.2-7.6 37.8-27.6 6.6-20-13.7-33-14-44.7-14.2 15.1-6.6 50.9-23.8 72.3z"
symbol#icon-avatar-9 viewBox="0 0 100 100"
title avatar-9
path d="M65.6 27.6c-4.7-10.9-21.9-11.1-29.8-9.5-9.8 2-12.8 4.4-19 9.6C12 31.7 7.2 43 6.3 49.2c8-2.1 16.3 1.1 24.5.2 8.3-.9 15.1-3.6 21.5-8.8 1.9-1.5 4.9-6.4 7.2-7 3.1-.8 6.2-.2 8.2 2.3s3.7 5.1 4.5 8.2c4 15.6 4.9 31.8 3.7 47.8-.6 7.9-1.6 15.8-3.1 23.7-.7 3.9-1.5 7.8-2.5 11.6-.8 3.1-2.4 6.3-2.2 9.6.2 2.4 4.2 3.1 6 3.9 5-25 7.8-51 5.3-76.4-.9-9.5-2.1-21.9-9.3-29C64 29 54 28.5 45.6 29.1c-7.1.9-18.2.3-30.8 12.1C25.2 23.7 59 22.6 65.6 27.6z"
path d="M80.9 14.8c4.7-10.9 21.9-11.1 29.8-9.5 9.8 2 12.8 4.4 19 9.6 4.8 4 9.5 15.3 10.4 21.5-8-2.1-16.3 1.1-24.5.2S100.5 33 94 27.8c-1.9-1.5-4.9-6.4-7.2-7-3.1-.8-6.2-.2-8.2 2.3-2.1 2.5-3.7 5.1-4.5 8.2-4 15.6-4.9 31.8-3.7 47.8.6 7.9 1.6 15.8 3.1 23.7.7 3.9 1.5 7.8 2.5 11.6.8 3.1 2.4 6.3 2.2 9.6-.2 2.4-4.2 3.1-6 3.9-5-25-7.8-51-5.3-76.4.9-9.5 2.1-21.9 9.3-29 6.4-6.3 16.3-6.7 24.8-6.1 7.1.9 18.2.3 30.8 12.1-10.6-17.6-44.4-18.7-50.9-13.7z"
- for avatar in (1..9)
- for light in (1..6)
- for dark in (1..6)
- for rotation in (0..3)
- ['true', 'false'].each do|reverse|
svg.avatar data-rotation="#{rotation}" data-light="#{light}" data-dark="#{dark}" data-reverse="#{reverse}"
use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-avatar-#{avatar}"$colors: (
hsl(205, 85%, 40%),
hsl(25, 85%, 30%),
hsl(45, 95%, 25%),
hsl(80, 85%, 25%),
hsl(180, 85%, 35%),
hsl(277, 35%, 40%),
);
@for $i from 0 through 3 {
$deg: $i * 90deg;
[data-rotation='#{$i}'] {
transform: rotate(#{$deg});
}
}
@for $i from 1 through length($colors) {
$color: nth($colors, $i);
$light: tint($color, 75%);
@each $reverse in (true, false) {
[data-reverse="#{$reverse}"] {
&[data-light='#{$i}'] {
$property: if($reverse, background, fill);
#{$property}: $light;
}
&[data-dark='#{$i}'] {
$property: if($reverse, fill, background);
#{$property}: $color;
}
}
}
}
// styles...
.avatar {
height: 2em;
margin: 1px;
width: 2em;
vertical-align: top;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.