web-weaving.jamesg.blog#20: Sara (sarajoy.dev)In Episode 20, I chat with Sara, the author of sarajoy.dev and whimsica11y.net, among other things, the importance of web accessibility, screen readers, and the joy of exploring and making things on the web.
Enjoy the episode!
## Transcript
This episode was transcribed by Zachary, the proprietor of Lunaseeker Press. If you notice any typos in the transcript, please contact James.
## James
**0:00** β Welcome to βWonders Of Web Weaving.β
This week Iβll be talking with Sara: the author of sarajoy.dev, creator of the CSS Joy webring, and author of whimsica11y.net.
Welcome to the show, Sara.
## Sara
**0:16** β Itβs nice being called an author and creator. I donβt feel like one, but thatβs grand. Thank you.
## James
**0:23** β Youβve brought many projects to life on the web. Creator and author and all the things fits.
I like to start with peopleβs journey into the web.
When did you start playing with the web, and when did you decide, βIβm going to make a website?β
## Sara
**0:48** β Thatβs ancient history. I was mid-teens, 13 or 14. 1997 or something? The internet was taking off, and I was fascinated by chat rooms. I loved chat rooms.
I didnβt have a connected PC at home, but we might go and chat at random festivals: thereβd be an internet cafe set up and thereβd be queues of people trying to get on the internet.
I donβt mean big music festivals, I mean stuff in cities. They would just be there.
Or if I was at a friendβs house and they had CompuServe, which they had here. Itβs our version of AOL in Britain. Iβm in Germany, but Britain was where I was at.
I was fascinated by having strangers in a text feed and talking to them. I found that addictive.
That happened for a while, and excitedly, I got a phone line up to my bedroom. I donβt know how I got anyone to agree to that. My dad was pushing it: this is the future.
I got on the internet and found the chat rooms and ICQ.
When you joined an ISP (got on the internet and had your internet service provider) theyβd set you up with your email, and with Usenet for newsgroups.
I donβt think that was IRC, but I found my way to that, and to ICQ and things like that. Chat stuff.
Theyβd also give you hosting and a little byline of how you can get started: this is what FTP is, and you can connect here with this software to put files on the internet for everyone to see.
I did a lot of clicking around and copying stuff. My first website, uploaded to clara.net a long time ago, was generated in Word 97, because it had web authoring. I put a virtual machine of Windows 2000 on my computer, to see if I could get Word 97 running, to see if it had web authoring. It does.
I taught myself HTML by flipping from the code into Word. If I change something in Word, what did that change in the code? Maybe I could change it in the code and see what that did in Word.
It was awful, the stuff it generated, but it was there, and it grew. It didnβt take long before I gave up on Word and went to Notepad, and then Notepad++. It kept chipping upwards.
The first website went up in β98 or β99. Iβve gone through waves of doing them and not doing them, but thatβs my first-website-on-the-internet story.
## James
**4:19** β Amazing. That interactivity of the web never gets old: youβve got a document, you tweak something, you change a class, add an attribute, and you see the changes on your screen.
It still feels magical.
## Sara
**4:36** β Iβm still addicted to that. It goes to the point where Iβm doing something simple for work.
As much as I love CSS, and I know a lot about it, you still end up in weird corridors of: why doesnβt that work? Youβre fiddling with properties and putting position relative on the parents in the hope that you get the right thing in the right place.
I can be snoozing the alarm thatβs telling me to go and pick up my kids, because Iβm thinking: if I try that, will it work? I always want to get it into a good state before I leave.
## James
**5:13** β Itβs a combination of the visual and playful side. Youβve got a problem and you think: which CSS property do I use? Or where do I add this link so it doesnβt overwhelm the navigation?
## Sara
**5:31** β I love it. If I had my ideal job, Iβd be noodling in CSS all day.
## James
**5:39** β That should be a job. Every town has a local person who does websites. That should be a thing.
## Sara
**5:50** β Yes.
## James
**5:52** β One of your projects that inspired me was Whimsica11y.
Before that, though, Iβm curious. For some people, their website is the entryway into web accessibility. They see someone on Mastodon talking about alt text and think: I should do that.
How did you get started thinking about web accessibility? Your site? Word? Something else?
## Sara
**6:22** β I was unaware of it for all teenagerhood. The sites were simple, and I wasnβt trying anything too crazy or unusual. Although I love me an iframe, which didnβt help.
Finding my way into accessibility happened when I was going: Iβm unhappy in my current job, Iβm going to try something else.
That something else was me at the end of having had two maternity leaves in a job which was fine and interesting, but which Iβd lost momentum in. I thought: I used to love playing with websites.
Iβd done other things in electronics, and I tried to be a teacher for a while. Iβve got a classic ADHD career history, where you try lots of things for a few years and move on.
This one feels like itβs sticking.
I spent a lot of time talking to people on Twitter, because at the time (I canβt remember his name, Leon something) was doing 100Devs, a free bootcamp.
It was after the start of the COVID pandemic. There was lots of hiring, lots of people into bootcamps and learning, because this seemed like the business to get into to get hired. It was, for a while.
There was encouragement, people egging each other on and talking about stuff in an excitable way.
I started following people who said things about accessibility. They were into CSS, and I now know thereβs a massive overlap between the people who love CSS and people who care about accessibility.
Thatβs how it snuck in.
Once Pandoraβs box had opened, I thought: if we make things in this slapdash way, weβre excluding a bunch of people. We donβt want to do that. Itβs been obvious since.
Though Iβm into accessibility, Iβve said this before: it feels like a hot thing because itβs important, because being inclusive is important. Itβs not an excitement thing.
Iβm not excited about accessibility. Iβm angry there isnβt more of it.
## James
**9:15** β I watched your talk at State of the Browser in London. I know David would want everyone to go and buy tickets, so you should do that.
When I watched your talk, it was like seeing the web with new eyes. You asked how we go beyond compliance to something more fun: seeing accessibility not as complying with checklists, but as how you create an experience for someone on your site thatβs unique and interesting.
When did you start building that lens, and how did it lead to Whimsica11y?
## Sara
**10:02** β Youβre talking about Whimsica11y as if itβs something that is. It exists, but the page is work in progress, and I stalled on it. Thatβs what the talk is about: why I stalled, and what worries me.
People on the internet love to argue. Even in the inclusive, caring accessibility community, there are people who love to argue about the right way and the wrong way to these things.
If you look for the guidelines, the webβ¦wait. WCAG. What does the C stand for again?
## James
**10:39** β Content. Web Content Accessibility Guidelines.
## Sara
**10:42** β Itβs long, and thereβs a lot to read, and you canβt just sit and read it. There are good guidelines on the internet, and lots of lovely websites that try and break it down and make it easier, but itβs still easy to get sucked into this feeling of: I could never get that right.
Some people throw up their hands and not bother, happy to think, maybe itβs not my problem.
My reasoning was: when youβre building your website, itβs your thing, your hobby thing. Youβre playing, youβre experimenting. Having something like that hanging over you is off-putting.
It shouldnβt be, especially for a personal website. If people are starting from the ground up, they have to do a lot to make something inaccessible. That comes with React and the big frameworks, where people start rolling their own everything out of divs, and badness happens.
I also know lots of the people building their websites are neurodivergent, or have visual problems, or might be deaf, or might have all kinds of issues, or might be coding using a sip-and-puff switch.
Theyβll want to be inclusive. The way in was me trying to make this a friendly, open, non-scary way of introducing accessibility to people doing it as a hobby.
The other point is websites arenβt just content. Youβve got the Web Content Accessibility Guidelines, and thatβs about making sure the content and the actionable stuff is available.
That stuff doesnβt always have personality.
People who start building their websites often, like I do, toy around in CSS, because itβs so visual and itβs fun: look at all the colors I can make, and the funny shapes, and what can I do with this text.
Itβs great, and it makes great vibes and cool little websites, but none of that gets through if youβre not sighted, or youβve got severe visual impairments.
It was also the thought of: we want these people to have fun too. They should also have fun looking at the bonkers websites. How can we do that in a way that isnβt difficult?
Itβs fun, because people worry about accessibility making things boring, and itβs not. It can be fun.
Iβm rambling now.
## James
**13:39** β The thing about accessibility that stuck with me was a TetraLogical post about types of disability. It introduced the idea of temporary disability: you might be in a loud environment so you canβt listen to something, or the sun is blazing on your phone and you canβt see the screen as well as you could, or you might have an eye injury and your sight is temporarily changed.
Thatβs worth thinking about when we talk about accessibility on the web.
Itβs not just for one group, itβs for everyone.
You donβt know if youβll be on the subway with no internet and canβt load that big website. You might not know your friend is colorblind and canβt see your links are the way they are.
## Sara
**14:32** β Temporarily-abled: Iβve read that once or twice, and I like it. I see my age-related stuff arriving alongside it and getting in the way.
Another one: screen readers are also useful if youβve got a site you want to read but youβve got washing up to do. You can set the screen reader going, and your eyes are busy doing other things.
Itβs grand. There was another point I had.
## James
**15:10** β Itβll come back.
Talking of screen readers, and this more joyful side of the web: Iβve tinkered with a screen reader, VoiceOver on Mac, and itβs fun to play around with, because I think: this is how others see the web.
The aperture of how I look at the web page is opening up.
I understand why skip links exist now. Iβm getting these layers, and as a programmer and a web developer itβs cool to start thinking: okay, my web page needs this to cater to this audience.
Itβs not boring to me. The long documents can feel boring, but when you start using this stuff itβs like: this is a skill, and you can help people through this skill.
## Sara
**16:06** β With the trainings Iβve managed to bring into my company, people just donβt realize. I donβt want to call people ignorant, itβs just that they havenβt come across it.
Itβs just the way it is. People in the industry havenβt come across the idea of a blind person using a computer, which boggles my mind.
Either way, thereβs this guy I befriended on the internet, who I keep bringing in.
Heβs called Florian Beijers, and heβs blind from birth. He uses a screen reader, but he can also read Braille, and he can develop: he reads code. He games, so heβs reviewing games for accessibility, and heβs a streamer and a consultant and all these things.
One thing he did that was most impactful was sending his audio through to us. It was happening remotely, and he went through our company website and showed everyone what it sounds like.
People hadnβt got the idea using a screen reader is like having a tiny little dot of focus that roams down the screen with the text. Youβre only ever in one point at once. You canβt see a flash message that turns up somewhere else, you canβt see the toast thatβs turning up over here.
You have to go through the whole thing if thereβs no skip link.
If you open a modal and close it, and it loses where you opened the modal from, youβre thrown back to the top of the page and you have to find your way back to where you were.
All these little things people donβt have in their heads, unless theyβve seen it happen.
A lot of this stuff is watching someone do it.
One video I saw (I donβt know where) was a guy using a sip-and-puff switch.
People use switches in all sorts of ways. They might have something on a wrist where they roll their hand to and fro, or a button theyβre hitting with their head. Not hitting, but pressing.
I couldnβt understand how an on-off momentary switch could do anything, but it showed the screen, and itβs carefully timed presses. They have a display which brings up a keyboard, and it starts tracking every row of the keyboard, tick tick tick tick, top to bottom. You tap the row you want, and it pulls out sections of keys, and you go: yes, that section of keys, yes, that key. It starts over again.
Thatβs got to be such a long-winded way to do things. Itβs about making sure you only have to type a few things here and there to use your website, or not having too many clicks, because itβs hard.
Sometimes these people take ages writing out a short message, and thatβs exhausting.
I found that video interesting, just like the people at my company found hearing the audio stream from a blind user new.
Itβs just seeing experiences. Itβs the same with anything, right?
We get more empathy with people weβve met, and if theyβve never met many disabled people, they donβt understand. Then accessibility becomes a list of checkboxes to tick.
## James
**20:07** β What opened my eyes this year was a video by Smashing Magazine, where LΓ©onie Watson showcased how she uses her screen reader. She set it much slower so we could understand.
Seeing those barriers people run into, and also, as a sighted person, seeing how the website is: it makes you think differently as a web developer. How do I make this easier?
Itβs a new and interesting question.
How do I help someone get to the right information quicker? How do I condense the information?
## Sara
**20:55** β When we open a website and weβre sighted and thereβs lots of it, we get a big scroll bar, or the scroll bar gets small, and we can see it down the side. They donβt get that affordance either.
Iβve heard that itβs useful to have the reading time, or however many thousand words are in the article, at the top. Otherwise they start on a passage and donβt know how long itβs going to be.
The other thing someone pointed out was: I donβt understand this website, the table of contents is at the bottom, it doesnβt make any sense. I was like: no, it doesnβt, let me look.
Visually it was in a column on the right, but in the document object model (the HTML) it was right at the bottom, because it was a three-column layout, and the right column was at the bottom. That makes no sense. If you want it on the right, you have to put it higher and fake the order visually.
Things like that just donβt occur to you unless you start playing, or asking someone whoβs blind and uses a screen reader.
Iβve also heard the advice using a screen reader isnβt easy. I donβt find it easy. The people who use them on the daily have all kinds of shortcuts, and they use them in different ways. Some let the whole page be read out, some skip by headings, some tab and jump around from there.
There are lots of other shortcuts which I donβt know. There are so many commands.
In some ways we do better to follow the checklist than to use a screen reader and go: itβs not pronouncing that thing properly, I should make it pronounce it properly.
Then we start taking away the autonomy of the people using these technologies.
You can go to and fro for ages.
This is where I got stuck with Whimsica11y. Thereβs so much information and advice, and so many things I worry about getting wrong that Iβm scared of giving advice.
But really: I donβt know what all these acronyms stand for.
Thereβs WAI, Web Accessibility Initiative. Theyβve got a website which breaks down WCAG, and a section called βItβs About People,β and thatβs got videos showing you how people use the web.
Even if you donβt go into the guidelines or worry too much about success criteria and all that, going through those videos is good, to have a bit of understanding.
## James
**24:17** β I love that phrase: itβs about people.
One thing that struck a chord: semantic HTML gets you far. There are these ARIA things, ways to make things sound differently, but if you use semantic HTML and your document order is correct, then as a site author, a personal website author, you can get far.
## Sara
**24:43** β Thatβs most of it.
Thatβs the other thing: everything in a header element is called the banner, and the footer is the footer. If you put your navigation in the banner, or at least in a nav (because thereβs a nav element) screen readers let you skip past those, if you know the right buttons.
Even if you donβt have your skip link, if theyβre in the right elements, youβve already given affordance to the people using these technologies.
## James
**25:14** β I need to double-check this, but the thing I was doing was the main HTML element. You have nav and main. Those would be two separate landmarks, so you could skip to main and over the nav.
## Sara
**25:34** β A few allow you to skip to main as a standard command. There are so many commands.
## James
**25:41** β People should explore this stuff. It gets me thinking: this is something people who write HTML can do, and itβs about people. Just as we put a fun picture on our website to express our personality, so too can we write playful alt text that describes that image.
## Sara
**26:11** β I donβt know if Iβve done that on my site. I might have. I add alt text to everything.
One bit of advice I like to give is: if a picture means a lot to you, write a lot about it. Why not stuff the alt text? You could put a warning at the beginning of the alt text: warning, alt text is long.
Lots of the advice says the alt text should be short, like text-message length, 140 characters or something plucked out of the old SMS limits.
Thatβs the thing. The Web Content Accessibility Guidelines are geared to e-commerce and government websites. Things everyone has to use or needs to use, where in order for everyone to be equal, all these things need to have accessible content.
With personal websites, theyβre not always about the content. Theyβre often about some kind of vibe. Some are hard to navigate even as a sighted person, and thatβs often on purpose. Some are hard to read, but thereβs also all kinds of interesting stuff going on visually.
A lot have audio, like MIDIs. I came across one the other day that had an emulated Winamp. Thatβs fun. Why not? Thereβs less audio on the internet nowadays, and it can be there. Itβs just songs.
It doesnβt auto-play, so itβs fine, as long as thereβs a button to press to start and stop it.
During this chat Iβve gone into the nitty gritty of how complicated these things are, and the stuff you need to look out for. The deal is, like you said: semantic websites.
These screen readers and assistive tech devices are built on an assumption the website and the web is built, in a certain way. It doesnβt have to be perfect, but the more you tinker, the more complicated you get, the more JavaScript you pile on top (and CSS sometimes) the less accessible it can get.
People doing their websites are in a good place.
Theyβre not abstracted miles away, not knowing whatβs on their website. Theyβre seeing all the code in front of them and might know whatβs there. Theyβve got less to worry about.
## James
**29:28** β A personal website can be more of a playground. You can experiment with the semantic elements and play around in CSS to style them the way you want.
Because itβs your space, thereβs no pressure to worry about error messages and forms unless that interests you. It might, and it interests me, but for my site itβs more like: are there link underlines, is the navigation element marked up, is there an article element where I have posts?
That stuff Iβve been learning over years, but it builds up, and youβve got this checklist you can take to your personal stuff and work stuff and say: okay, new document, this element, this element here.
## Sara
**30:16** β I have to admit, I still find myself in this web of complexity sometimes. I look at my website and I bare my teeth. I donβt have time to rework the thing, and I know Iβd do it better next time, but there are still things that arenβt so great, because it was organically grown since 2021.
When I get to work, especially when thereβs a big existing codebase, there are some things I can root out. I can be like: this button shouldnβt be a div, I can fix that, thatβs easy. Other things are intricate, and at some point I go, you know what, fine: use 13-point font, but no lower. No lower.
Okay, fine, grey on grey, but it has to be this grey, and please no lower.
## James
**31:21** β I love that approach of taking it slow and incrementally building.
Iβd like to bring a new dimension into that. Weβve been on the outskirts of this: we spoke about accessibility, and about bringing in whimsy.
The web is a playground. You make web pages about the things you love, you share them with friends, and that can be your whole web experience. You donβt need to worry about learning, mastering and teaching email or JavaScript or whatever. Itβs just: you bring you.
Since youβve thought a lot about this: how can we bring more joy into the web, whether we code, or we just have a website somewhere else?
## Sara
**32:09** β I have found more joy since starting that webring.
I thought: cool, webrings are great. I found a place that hosts them for me, so I donβt need to worry about the coding or the deep maintenance of it, which is great.
Until then, I knew Neocities was around, and I knew there was the 32-Bit Cafe and the IndieWeb and all these other little communities into making their own website.
What I had lost sight of was the people. Random people, not devs, doing it as a hobby, making their own website in their own time because they find it fun. Real random people who do all kinds of other jobs, all kinds of different lives, who happen to be enjoying making websites.
Thereβs so much random stuff, just like I remember in the early 2000s, and websites I wouldβve seen then. Plenty have joined my webring, and theyβre bonkers, and they bring more joy than I realized.
I donβt know how I try and bring some.
My site started as a portfolio, and I shoved a blog onto it, and itβs grown and itβs organic. Itβs got random bits and silly streaks in the code. Iβm not sure mine is the best example.
I think browsing these webrings, like Melonland by this Irish artist whose name Iβve forgotten right now, who calls himself the Melon King. Heβs into the web revival, and thereβs the Melonland Surf Club. Just pottering through and seeing all these amazing sites.
The other thing is that of course thatβs speaking visually, and you may be going through this webring and hitting next, next, next to see what there is.
One thing that worries me, especially in the age of AI and Grammarly, is people are scared to let their voice be their voice. Theyβll write an article and panic about how well it reads or scans, and put it through an AI or Grammarly, or prompt the AI to write it in the first place.
Then we lose their voice, and we get this generic internet voice, and thatβs dull, right? Just like I enjoy hearing peopleβs accents, I enjoy reading different writing styles.
Thatβs one way we can bring a lot of joy: allowing our own humanity to come through.
I say this as a native English speaker.
People who arenβt native English speakers will be more likely to want to check their writing, and will probably take on more of the suggestions of Grammarly and all that sort of thing. So itβs tricky.
Getting peopleβs personality through is what we need.
Weβre in this βAI-generated everything,β and we canβt trust itβs a human unless thereβs something obviously human about it. Obvious human things are often rough around the edges.
## James
**35:59** β I wish I could hold up a sign that says: I want to hear you.
When Iβm surfing the indie web and looking at websites, I love the slices of life of a group of friends in New York just as much as I love people writing about data protection, or people sharing their latest travels to Singapore, or somebody talking about their connection to their hometown in the UK.
I love those stories, and thatβs why I come to the web. I was chatting with someone this week and they were like, βJames, I do this because of the people.β
That feels like what we should be doing. Thatβs why weβre here.
## Sara
**36:45** β Thatβs why I was obsessed with chat rooms. All these people are there, and theyβre talking.
Sure, lots of them would be asking your age, sex, location and trying to find out your bra size, but that was a different time. Iβm sure that still happens somewhere. I had another point, and itβs gone.
## James
**37:14** β You were saying you want to see more people.
## Sara
**37:20** β Yes. That was something Iβve seen a few times, where people are starting to worry their blogs are going off topic, and they think: I should spin off another blog which is all the personal stories, and then this can be my tech blog and this can be my personal blog.
My first instinct is: no, thatβs the good stuff.
Part of me wonders: does it mean I prefer the personal blog?
Iβm not sure I do, because Iβm reading the tech stuff, and Iβm intrigued by the person and I want to find out more. Or Iβve got to know a person and their personal stuff is so interesting, I then value their tech opinion more, because I know where theyβre coming from.
I love the mixture. People do that on social media: sometimes they have a tech account and a personal account. I donβt give two monkeys about the tech account. I can find that information if I want. I often follow both, but it feels odd to separate them.
## James
**38:34** β I asked myself that question too. I was like: if I put technology next to my coffee post, is that going to deter one audience over the other? I concluded I canβt be bothered to set up another website, and I embraced it after the fact: people can come for one thing and stay for another.
## Sara
**38:56** β You can tag them and say: hereβs all the tech ones, and hereβs all the personal ones.
## James
**39:04** β Iβve never thought about this, but especially today, thereβs something about how information about technology should be in the hands of everyone.
We can talk about HTML and CSS because weβve been doing it for a while, but there are a lot of people (just today I was in a chat with someone whoβs learning HTML) and sharing tech stuff matters, because thereβs people for whom today is the first day theyβre learning that the web exists.
## Sara
**39:44** β Thatβs something I miss from Twitter. Because of 100Devs, and that wave of people all learning at once, even as I was learning myself I was able to give a leg up to other people.
I feel like itβs gone, or not so easy to find.
I donβt know if itβs an economic thing, that the hiring boom stopped and now there are AI layoffs, which arenβt really AI layoffs, theyβre just because they over-hired in the boom. Or if there was something about Twitter and people havenβt found their way to Mastodon or Bluesky.
Or if Iβm just not following the right people now.
I miss hearing about people with a hunger to learn more, but maybe Iβm starting to see them again.
The other day I did that Whimsica11y talk for the Bad Website Club. Have you heard of that?
## James
**40:47** β Yeah.
## Sara
**40:49** β Theyβre doing stuff like this. I donβt know if theyβre doing it every year, but the Bad Website Club is a free bootcamp, with lots of keen people.
There are people who wouldβve been making their living off educational materials for developers, whoβre struggling. I suspect thatβs also to do with this hiring boom having ended, and there arenβt so many juniors using the education budgets on these things. Which sucks.
## James
**41:35** β Things are changing.
Itβs with that in mind Iβll come to my final questions.
We spend time thinking about where things are, and itβs nice to step back and ask: where do we want them to be in the future? If we talk about this, everyone knows another direction is possible.
Where would you like the indie web to be in five years? What would you like to see more of? What creative renaissance do you think we could help enable?
## Sara
**42:14** β Iβm not sure I can predict.
Iβm being surprised left and right by how much more of the independent/social/personal/small web (whatever we call it, web revival stuff) keeps finding me at the moment, from random places.
Things appear in my feed, and itβs not through the stuff Iβve sought out.
When I got on the internet, people like me were messing around with the stuff they got from their ISP. There was the odd website which was sort of corporate, but they didnβt know how to do e-commerce, so there wasnβt any. A lot of us got this idea that personal messing-about web had disappeared, and Iβm more and more convinced it never did. I donβt know if it shrank.
There was a post that came out: βThe Boring Web,β by Terry Godier.
The argument was it never went away. Or: the web isnβt dying, just the veneer thatβs been pasted over it for the last ten years is dying, and thatβs not a bad thing.
Because search engines have become rubbish, because thereβs so much AI and dross to filter through, weβre having to rely more on curation and word of mouth and shared links and webrings, and other indexes of websites people are building, like these portal websites that Yahoo used to be.
Weβre finding our way through in a human way again, instead of tapping it into a search engine and going where it tells us to go. Weβre relearning how to surf that web thatβs been there all the time. We forgot how to use it, because everything popped up in our feeds or in the search engine and we didnβt have to make the effort to surf anymore.
My prediction is thatβs going to keep coming up, especially as Google has gone: weβre defaulting to AI.
Whatβs the other thing? This veneer theyβve painted on the internet. You can call it the silos: the big social medias like Facebook, and Google to some degree, and Twitter.
Itβs good these platforms exist for the people who donβt want to build websites, because those people exist. There are people who donβt want to build websites but would still like to communicate.
Platforms should always be available. But the rest of us are refinding our roots. Without searching.
## James
**45:50** β Weβre building a different topology of the web.
Weβre rebuilding the one we had, where I find peopleβs websites because my friends tell me about them, and I learn about different parts of the world because Iβm looking through Bear Blog and someone new signed up and posted photos, and Iβm exploring their website thinking: how cool.
The way Iβm thinking about the web is changing. It used to be that Iβd go to a search engine with a query in mind, but now I go to a community, and I surf.
## Sara
**46:34** β That used to be more normal. I remember going down the categories if I was finding something I wanted, and I remember going to peopleβs link lists or blogrolls or whatever.
Even before blogging was a thing, people would make a website and keep adding pages, and their front page would be a page with links to those pages. They werenβt articles, they werenβt blogs, they werenβt dated. They were a page with: my favorite buttons, hereβs my friend list, a page about my cat.
The surfing was bouncing around these things, and it was entertaining. Why not carry on doing that?
Especially in the dev world, we get stuck with: weβll have a website, itβll have a nav, itβs got an about me, I should probably blog on it, we should have articles and theyβre going to be dated, and thereβs going to be a portfolio page, and Iβm going to have a contact page.
It feels like: hereβs how itβs going to be.
I donβt think itβs wrong, but we all do that, and we donβt have to. I did that, of course I did.
## James
**48:01** β As soon as you said that, I thought: last year I redesigned my home page. I wanted to give my home page more personality, so I gave it a different layout to the rest of the site.
I was writing it and thinking: it needs to say this is a coffee blog, and I need to have the name. Then I thought: I could use one of the fonts Taylor Swift used on one of her albums.
Another blogger wrote a post where they identified the fonts on her album covers, so: great, okay.
Most people donβt know thatβs there, but I do, and itβs so recognizable Taylor Swift fans would get it. This is me bringing a little personality, and itβs not groundbreaking. Itβs not a new interaction design paradigm. Itβs just a little something someone might recognize.
## Sara
**49:01** β If you wanted to do that for someone who couldnβt see the font, you might, in your introductory paragraph or something, randomly sneak lyrics in.
## James
**49:08** β I love that, because Iβve got hidden messages in my source code, so Iβm already doing that for people who view source. Hidden messages for a screen reader? Thatβs interesting.
## Sara
**50:23** β There are little things like this that Iβm trying to think of. I struggle: Iβm sighted, and I play with CSS in a very visual way. Whimsica11y was also: I donβt know how to do this either, but letβs see what we can do to get good vibes across to everyone. Not just people who can see it.
## James
**50:52** β One of my conclusions is the web is a conversation.
Weβre talking about how we want the web to be, how it is, how it was.
Itβs important that we ask ourselves questions on the periphery of whatβs being done, to see: can we make the web more whimsical? Can we make the web more in the shape of how we want it to be?
## Sara
**51:15** β Agreed.
Josh Comeau has a course about whimsical animations: stuff that makes a website look more alive. Iβm sure he also includes little audio bits in them. I know thatβd drive some people nuts, if a website would always make a noise on a click, or various other things. Also, why not, as long as thereβs an off button? Always an off or on button. This auditory world can be influenced by the words that you give to the screen reader, but you could also provide some audio.
Another thing I did in the Whimsica11y talk: Keenan has a blog, and is expressive when reading and speaking. Does voiceovers and podcasts of posts, and adds an audio player into the pages.
Itβs so good. You get to hear that person enunciate those words. The words are already beautifully written, but hearing it in the authorβs voice is extra, and great.
## James
**52:52** β Talking of voices, I donβt know whether to bring this up. If I bring it up, someone listening who knows specs might say we should bring this back. Iβm going to bring it up anyway.
I learned two years ago there was this concept called aural style sheets and it was talking about voices, and you could have an attribute for stress and richness and cues.
I donβt know how far this went. There was a big red note saying the document I was reading was a W3C thing, like I was saying. But people thought about aural style sheets, and itβs interesting to think about: how would you design that page with an audio experience in mind?
## Sara
**53:35** β Thereβs a thing still in the works called CSS Speech. I donβt know if thatβs the same. LΓ©onie was talking about it. It has to be opt-in, because some people would be driven crazy by that. Often someone who uses a screen reader has a specific voice, because they can make it go fast and still understand it. In moments where youβd like to hear something and annotate it nicely, thatβd be good.
It seems odd weβll put bold, italic, and underlines, and in our head we read them with more enunciation. How do you read out italics? How do we read? Itβs different.
I donβt know where Iβd start without making it annoying.
## James
**53:45** β Thatβs where it needs to start: in the rough, and we talk about it.
## Sara
**53:58** β Thereβs CSS Speech. LΓ©onie is doing stuff with it. Itβs hard to push forward, because itβs niche. Anyone listening can make that a reality. Thatβd be cool. I like giving people homework.
## James
**54:38** β With that said, weβve come to the end, but I like to end on a fun question. You mentioned youβre in Germany, so: is there a German dessert you like? Or a savory food, if youβre more savory.
## Sara
**54:54** β When I moved to Germany, I was like: itβs just bread, beer and sausages.
Oddly, theyβre into beer and sausages, and I find the beer and sausages here are nowhere near as interesting as what you get in the UK. The Brits are super into tea and drink boring tea, whereas here, if you order tea, theyβll offer you ten infusions: which would you like?
Whatβs my favorite German food? I donβt know. I go through many weird moods with food. My kids love SpΓ€tzle, a South German variant on pasta.
Youβve put me on the spot. There must be food I love here, but I canβt think of one offhand.
Spaghettieis. They take vanilla ice cream and push it through a mincer so it comes out like spaghetti. They add strawberry, raspberry or cherry sauce. Looks like spaghetti, but itβs ice cream.
## James
**56:20** β Thatβs amazing.
I love German chocolate. I went to Berlin and got chocolate from the supermarket and thought: this is so good. Thereβs mango chocolate. Why does everywhere not have mango chocolate?
## Sara
**56:40** β Thereβs a good variety. Itβs got more cocoa solids than the British stuff.
## James
**56:47** β The last question is: where can people find you on the web?
## Sara
**56:55** β Iβm active on Mastodon, @[email protected], or Bluesky, where Iβm @sjoy.lol. Otherwise, you mentioned my site, and thatβs got the links to wherever: sarajoy.dev.
## James
**57:24** β Thank you so much, Sara, for taking the time to chat. This has been so fun.
## Sara
**57:30** β Thank you. I hope I was coherent.
## James
**57:33** β Of course. When weβre planning the future of the web, the mental cogs are turning.
## Sara
**57:39** β They are.
%20--%3E%3Cmetadata%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Axsi%3D%22http%3A%2F%2Fwww.w3.org%2F2001%2FXMLSchema-instance%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Adcterms%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fterms%2F%22%3E%3Crdf%3ARDF%3E%3Crdf%3ADescription%3E%3Cdc%3Atitle%3EShadows%3C%2Fdc%3Atitle%3E%3Cdc%3Acreator%3EDiceBear%3C%2Fdc%3Acreator%3E%3Cdc%3Asource%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fwww.dicebear.com%3C%2Fdc%3Asource%3E%3Cdcterms%3Alicense%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F%3C%2Fdcterms%3Alicense%3E%3Cdc%3Arights%3E%E2%80%9CShadows%E2%80%9D%20(https%3A%2F%2Fwww.dicebear.com)%20by%20%E2%80%9CDiceBear%E2%80%9D%2C%20licensed%20under%20%E2%80%9CCC0%201.0%E2%80%9D%20(https%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F)%3C%2Fdc%3Arights%3E%3C%2Frdf%3ADescription%3E%3C%2Frdf%3ARDF%3E%3C%2Fmetadata%3E%3Cdefs%3E%3Cg%20id%3D%22shoulders-wide-22a93ba8%22%3E%3Cpath%20d%3D%22M0%2050C0%2017%2017.55%203%2039%203s39%2014%2039%2047Z%22%20fill%3D%22%2333477f%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22tops-flat-22a93ba8%22%3E%3Cpath%20d%3D%22M12.5%2036V14q0-4%204-4h23q4%200%204%204v22q-15.5%207-31%200%22%20fill%3D%22%2333477f%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22heads-round-22a93ba8%22%3E%3Cuse%20transform%3D%22translate(3%203)%20rotate(6%2C%2028%2C%2025)%22%20href%3D%22%23tops-flat-22a93ba8%22%2F%3E%3Ccircle%20cx%3D%2231%22%20cy%3D%2238%22%20r%3D%2219%22%20fill%3D%22%2333477f%22%2F%3E%3C%2Fg%3E%3CclipPath%20id%3D%22clip-22a93ba8%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20rx%3D%220%22%20ry%3D%220%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url(%23clip-22a93ba8)%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23dfe8ed%22%2F%3E%3Cuse%20transform%3D%22translate(11%2051)%22%20href%3D%22%23shoulders-wide-22a93ba8%22%2F%3E%3Cuse%20transform%3D%22translate(19%201)%22%20href%3D%22%23heads-round-22a93ba8%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
%20--%3E%3Cmetadata%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Axsi%3D%22http%3A%2F%2Fwww.w3.org%2F2001%2FXMLSchema-instance%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Adcterms%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fterms%2F%22%3E%3Crdf%3ARDF%3E%3Crdf%3ADescription%3E%3Cdc%3Atitle%3EShadows%3C%2Fdc%3Atitle%3E%3Cdc%3Acreator%3EDiceBear%3C%2Fdc%3Acreator%3E%3Cdc%3Asource%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fwww.dicebear.com%3C%2Fdc%3Asource%3E%3Cdcterms%3Alicense%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F%3C%2Fdcterms%3Alicense%3E%3Cdc%3Arights%3E%E2%80%9CShadows%E2%80%9D%20(https%3A%2F%2Fwww.dicebear.com)%20by%20%E2%80%9CDiceBear%E2%80%9D%2C%20licensed%20under%20%E2%80%9CCC0%201.0%E2%80%9D%20(https%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F)%3C%2Fdc%3Arights%3E%3C%2Frdf%3ADescription%3E%3C%2Frdf%3ARDF%3E%3C%2Fmetadata%3E%3Cdefs%3E%3Cg%20id%3D%22shoulders-square-783473fc%22%3E%3Cpath%20d%3D%22M4%2050V17C4%209%2010%203%2018%203h42c8%200%2014%206%2014%2014v33Z%22%20fill%3D%22%235b4e30%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22tops-puffs-783473fc%22%3E%3Cg%3E%3Cellipse%20cx%3D%2228%22%20cy%3D%2231%22%20rx%3D%2221%22%20ry%3D%2219%22%20fill%3D%22%235b4e30%22%2F%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2219%22%20r%3D%228.5%22%20fill%3D%22%235b4e30%22%2F%3E%3Ccircle%20cx%3D%2242%22%20cy%3D%2219%22%20r%3D%228.5%22%20fill%3D%22%235b4e30%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20id%3D%22heads-taper-783473fc%22%3E%3Cuse%20transform%3D%22translate(3%203)%20rotate(3%2C%2028%2C%2025)%22%20href%3D%22%23tops-puffs-783473fc%22%2F%3E%3Cpath%20d%3D%22M31%2019c12%200%2019%207%2019%2016%200%2012-9%2022-19%2022S12%2047%2012%2035c0-9%207-16%2019-16%22%20fill%3D%22%235b4e30%22%2F%3E%3C%2Fg%3E%3CclipPath%20id%3D%22clip-783473fc%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20rx%3D%220%22%20ry%3D%220%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url(%23clip-783473fc)%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23ede3e9%22%2F%3E%3Cuse%20transform%3D%22translate(11%2051)%22%20href%3D%22%23shoulders-square-783473fc%22%2F%3E%3Cuse%20transform%3D%22translate(19%201)%22%20href%3D%22%23heads-taper-783473fc%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
%20--%3E%3Cmetadata%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Axsi%3D%22http%3A%2F%2Fwww.w3.org%2F2001%2FXMLSchema-instance%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Adcterms%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fterms%2F%22%3E%3Crdf%3ARDF%3E%3Crdf%3ADescription%3E%3Cdc%3Atitle%3EShadows%3C%2Fdc%3Atitle%3E%3Cdc%3Acreator%3EDiceBear%3C%2Fdc%3Acreator%3E%3Cdc%3Asource%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fwww.dicebear.com%3C%2Fdc%3Asource%3E%3Cdcterms%3Alicense%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F%3C%2Fdcterms%3Alicense%3E%3Cdc%3Arights%3E%E2%80%9CShadows%E2%80%9D%20(https%3A%2F%2Fwww.dicebear.com)%20by%20%E2%80%9CDiceBear%E2%80%9D%2C%20licensed%20under%20%E2%80%9CCC0%201.0%E2%80%9D%20(https%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F)%3C%2Fdc%3Arights%3E%3C%2Frdf%3ADescription%3E%3C%2Frdf%3ARDF%3E%3C%2Fmetadata%3E%3Cdefs%3E%3Cg%20id%3D%22shoulders-round-37a068e1%22%3E%3Cellipse%20cx%3D%2239%22%20cy%3D%2241%22%20rx%3D%2232%22%20ry%3D%2241%22%20fill%3D%22%23345757%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22heads-oval-37a068e1%22%3E%3Cellipse%20cx%3D%2231%22%20cy%3D%2238%22%20rx%3D%2218%22%20ry%3D%2221%22%20fill%3D%22%23345757%22%2F%3E%3C%2Fg%3E%3CclipPath%20id%3D%22clip-37a068e1%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20rx%3D%220%22%20ry%3D%220%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url(%23clip-37a068e1)%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23d0edec%22%2F%3E%3Cuse%20transform%3D%22translate(11%2051)%22%20href%3D%22%23shoulders-round-37a068e1%22%2F%3E%3Cuse%20transform%3D%22translate(19%201)%22%20href%3D%22%23heads-oval-37a068e1%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
%20--%3E%3Cmetadata%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Axsi%3D%22http%3A%2F%2Fwww.w3.org%2F2001%2FXMLSchema-instance%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Adcterms%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fterms%2F%22%3E%3Crdf%3ARDF%3E%3Crdf%3ADescription%3E%3Cdc%3Atitle%3EShadows%3C%2Fdc%3Atitle%3E%3Cdc%3Acreator%3EDiceBear%3C%2Fdc%3Acreator%3E%3Cdc%3Asource%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fwww.dicebear.com%3C%2Fdc%3Asource%3E%3Cdcterms%3Alicense%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F%3C%2Fdcterms%3Alicense%3E%3Cdc%3Arights%3E%E2%80%9CShadows%E2%80%9D%20(https%3A%2F%2Fwww.dicebear.com)%20by%20%E2%80%9CDiceBear%E2%80%9D%2C%20licensed%20under%20%E2%80%9CCC0%201.0%E2%80%9D%20(https%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F)%3C%2Fdc%3Arights%3E%3C%2Frdf%3ADescription%3E%3C%2Frdf%3ARDF%3E%3C%2Fmetadata%3E%3Cdefs%3E%3Cg%20id%3D%22shoulders-regular-12f4b48b%22%3E%3Cpath%20d%3D%22M6%2050C6%2017%2020.85%201%2039%201s33%2016%2033%2049Z%22%20fill%3D%22%235e3b87%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22tops-waves-12f4b48b%22%3E%3Cg%3E%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2223.5%22%20r%3D%227%22%20fill%3D%22%235e3b87%22%2F%3E%3Ccircle%20cx%3D%2227%22%20cy%3D%2219%22%20r%3D%227.5%22%20fill%3D%22%235e3b87%22%2F%3E%3Ccircle%20cx%3D%2239%22%20cy%3D%2222.5%22%20r%3D%228%22%20fill%3D%22%235e3b87%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20id%3D%22heads-wide-12f4b48b%22%3E%3Cuse%20transform%3D%22translate(.05%202.32)scale(1.11)%22%20href%3D%22%23tops-waves-12f4b48b%22%2F%3E%3Cellipse%20cx%3D%2231%22%20cy%3D%2238%22%20rx%3D%2221%22%20ry%3D%2218%22%20fill%3D%22%235e3b87%22%2F%3E%3C%2Fg%3E%3CclipPath%20id%3D%22clip-12f4b48b%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20rx%3D%220%22%20ry%3D%220%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url(%23clip-12f4b48b)%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23deedc2%22%2F%3E%3Cuse%20transform%3D%22translate(11%2051)%22%20href%3D%22%23shoulders-regular-12f4b48b%22%2F%3E%3Cuse%20transform%3D%22translate(19%201)%22%20href%3D%22%23heads-wide-12f4b48b%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
%20--%3E%3Cmetadata%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Axsi%3D%22http%3A%2F%2Fwww.w3.org%2F2001%2FXMLSchema-instance%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Adcterms%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fterms%2F%22%3E%3Crdf%3ARDF%3E%3Crdf%3ADescription%3E%3Cdc%3Atitle%3EShadows%3C%2Fdc%3Atitle%3E%3Cdc%3Acreator%3EDiceBear%3C%2Fdc%3Acreator%3E%3Cdc%3Asource%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fwww.dicebear.com%3C%2Fdc%3Asource%3E%3Cdcterms%3Alicense%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F%3C%2Fdcterms%3Alicense%3E%3Cdc%3Arights%3E%E2%80%9CShadows%E2%80%9D%20(https%3A%2F%2Fwww.dicebear.com)%20by%20%E2%80%9CDiceBear%E2%80%9D%2C%20licensed%20under%20%E2%80%9CCC0%201.0%E2%80%9D%20(https%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F)%3C%2Fdc%3Arights%3E%3C%2Frdf%3ADescription%3E%3C%2Frdf%3ARDF%3E%3C%2Fmetadata%3E%3Cdefs%3E%3Cg%20id%3D%22shoulders-sloped-860b88b8%22%3E%3Cpath%20d%3D%22M3%2050C3%2013%2019.2%205%2039%205s36%208%2036%2045Z%22%20fill%3D%22%234a5530%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22tops-flat-860b88b8%22%3E%3Cpath%20d%3D%22M12.5%2036V14q0-4%204-4h23q4%200%204%204v22q-15.5%207-31%200%22%20fill%3D%22%234a5530%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22heads-oval-860b88b8%22%3E%3Cuse%20transform%3D%22matrix(.95%200%200%20.95%204.47%201.84)%20rotate(-3%2C%2028%2C%2025)%22%20href%3D%22%23tops-flat-860b88b8%22%2F%3E%3Cellipse%20cx%3D%2231%22%20cy%3D%2238%22%20rx%3D%2218%22%20ry%3D%2221%22%20fill%3D%22%234a5530%22%2F%3E%3C%2Fg%3E%3CclipPath%20id%3D%22clip-860b88b8%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20rx%3D%220%22%20ry%3D%220%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url(%23clip-860b88b8)%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23deedc2%22%2F%3E%3Cuse%20transform%3D%22translate(11%2051)%22%20href%3D%22%23shoulders-sloped-860b88b8%22%2F%3E%3Cuse%20transform%3D%22translate(19%201)%22%20href%3D%22%23heads-oval-860b88b8%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
%20--%3E%3Cmetadata%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Axsi%3D%22http%3A%2F%2Fwww.w3.org%2F2001%2FXMLSchema-instance%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Adcterms%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fterms%2F%22%3E%3Crdf%3ARDF%3E%3Crdf%3ADescription%3E%3Cdc%3Atitle%3EShadows%3C%2Fdc%3Atitle%3E%3Cdc%3Acreator%3EDiceBear%3C%2Fdc%3Acreator%3E%3Cdc%3Asource%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fwww.dicebear.com%3C%2Fdc%3Asource%3E%3Cdcterms%3Alicense%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F%3C%2Fdcterms%3Alicense%3E%3Cdc%3Arights%3E%E2%80%9CShadows%E2%80%9D%20(https%3A%2F%2Fwww.dicebear.com)%20by%20%E2%80%9CDiceBear%E2%80%9D%2C%20licensed%20under%20%E2%80%9CCC0%201.0%E2%80%9D%20(https%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F)%3C%2Fdc%3Arights%3E%3C%2Frdf%3ADescription%3E%3C%2Frdf%3ARDF%3E%3C%2Fmetadata%3E%3Cdefs%3E%3Cg%20id%3D%22shoulders-sloped-9c837364%22%3E%3Cpath%20d%3D%22M3%2050C3%2013%2019.2%205%2039%205s36%208%2036%2045Z%22%20fill%3D%22%23345945%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22tops-bun-9c837364%22%3E%3Cg%3E%3Cellipse%20cx%3D%2228%22%20cy%3D%2231%22%20rx%3D%2221%22%20ry%3D%2219%22%20fill%3D%22%23345945%22%2F%3E%3Ccircle%20cx%3D%2236%22%20cy%3D%2210%22%20r%3D%227%22%20fill%3D%22%23345945%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20id%3D%22heads-tall-9c837364%22%3E%3Cuse%20transform%3D%22matrix(.89%200%200%20.89%205.95%20-.32)%20rotate(6%2C%2028%2C%2025)%22%20href%3D%22%23tops-bun-9c837364%22%2F%3E%3Cellipse%20cx%3D%2231%22%20cy%3D%2237%22%20rx%3D%2217%22%20ry%3D%2223%22%20fill%3D%22%23345945%22%2F%3E%3C%2Fg%3E%3CclipPath%20id%3D%22clip-9c837364%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20rx%3D%220%22%20ry%3D%220%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url(%23clip-9c837364)%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23d0edec%22%2F%3E%3Cuse%20transform%3D%22translate(11%2051)%22%20href%3D%22%23shoulders-sloped-9c837364%22%2F%3E%3Cuse%20transform%3D%22translate(19%201)%22%20href%3D%22%23heads-tall-9c837364%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
%20--%3E%3Cmetadata%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Axsi%3D%22http%3A%2F%2Fwww.w3.org%2F2001%2FXMLSchema-instance%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Adcterms%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fterms%2F%22%3E%3Crdf%3ARDF%3E%3Crdf%3ADescription%3E%3Cdc%3Atitle%3EShadows%3C%2Fdc%3Atitle%3E%3Cdc%3Acreator%3EDiceBear%3C%2Fdc%3Acreator%3E%3Cdc%3Asource%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fwww.dicebear.com%3C%2Fdc%3Asource%3E%3Cdcterms%3Alicense%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F%3C%2Fdcterms%3Alicense%3E%3Cdc%3Arights%3E%E2%80%9CShadows%E2%80%9D%20(https%3A%2F%2Fwww.dicebear.com)%20by%20%E2%80%9CDiceBear%E2%80%9D%2C%20licensed%20under%20%E2%80%9CCC0%201.0%E2%80%9D%20(https%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F)%3C%2Fdc%3Arights%3E%3C%2Frdf%3ADescription%3E%3C%2Frdf%3ARDF%3E%3C%2Fmetadata%3E%3Cdefs%3E%3Cg%20id%3D%22shoulders-round-720cd2e6%22%3E%3Cellipse%20cx%3D%2239%22%20cy%3D%2241%22%20rx%3D%2232%22%20ry%3D%2241%22%20fill%3D%22%2333477f%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22heads-round-720cd2e6%22%3E%3Ccircle%20cx%3D%2231%22%20cy%3D%2238%22%20r%3D%2219%22%20fill%3D%22%2333477f%22%2F%3E%3C%2Fg%3E%3CclipPath%20id%3D%22clip-720cd2e6%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20rx%3D%220%22%20ry%3D%220%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url(%23clip-720cd2e6)%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23ede6d6%22%2F%3E%3Cuse%20transform%3D%22translate(11%2051)%22%20href%3D%22%23shoulders-round-720cd2e6%22%2F%3E%3Cuse%20transform%3D%22translate(19%201)%22%20href%3D%22%23heads-round-720cd2e6%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
%20--%3E%3Cmetadata%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Axsi%3D%22http%3A%2F%2Fwww.w3.org%2F2001%2FXMLSchema-instance%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Adcterms%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fterms%2F%22%3E%3Crdf%3ARDF%3E%3Crdf%3ADescription%3E%3Cdc%3Atitle%3EShadows%3C%2Fdc%3Atitle%3E%3Cdc%3Acreator%3EDiceBear%3C%2Fdc%3Acreator%3E%3Cdc%3Asource%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fwww.dicebear.com%3C%2Fdc%3Asource%3E%3Cdcterms%3Alicense%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F%3C%2Fdcterms%3Alicense%3E%3Cdc%3Arights%3E%E2%80%9CShadows%E2%80%9D%20(https%3A%2F%2Fwww.dicebear.com)%20by%20%E2%80%9CDiceBear%E2%80%9D%2C%20licensed%20under%20%E2%80%9CCC0%201.0%E2%80%9D%20(https%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F)%3C%2Fdc%3Arights%3E%3C%2Frdf%3ADescription%3E%3C%2Frdf%3ARDF%3E%3C%2Fmetadata%3E%3Cdefs%3E%3Cg%20id%3D%22shoulders-uneven-5dcf0143%22%3E%3Cpath%20d%3D%22M6%2050C6%2015%2020%200%2039%201c18%201%2033%2018%2033%2049Z%22%20fill%3D%22%23733662%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22heads-taper-5dcf0143%22%3E%3Cpath%20d%3D%22M31%2019c12%200%2019%207%2019%2016%200%2012-9%2022-19%2022S12%2047%2012%2035c0-9%207-16%2019-16%22%20fill%3D%22%23733662%22%2F%3E%3C%2Fg%3E%3CclipPath%20id%3D%22clip-5dcf0143%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20rx%3D%220%22%20ry%3D%220%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url(%23clip-5dcf0143)%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23ede4e4%22%2F%3E%3Cuse%20transform%3D%22translate(11%2051)%22%20href%3D%22%23shoulders-uneven-5dcf0143%22%2F%3E%3Cuse%20transform%3D%22translate(19%201)%22%20href%3D%22%23heads-taper-5dcf0143%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
%20--%3E%3Cmetadata%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Axsi%3D%22http%3A%2F%2Fwww.w3.org%2F2001%2FXMLSchema-instance%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Adcterms%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fterms%2F%22%3E%3Crdf%3ARDF%3E%3Crdf%3ADescription%3E%3Cdc%3Atitle%3EShadows%3C%2Fdc%3Atitle%3E%3Cdc%3Acreator%3EDiceBear%3C%2Fdc%3Acreator%3E%3Cdc%3Asource%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fwww.dicebear.com%3C%2Fdc%3Asource%3E%3Cdcterms%3Alicense%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F%3C%2Fdcterms%3Alicense%3E%3Cdc%3Arights%3E%E2%80%9CShadows%E2%80%9D%20(https%3A%2F%2Fwww.dicebear.com)%20by%20%E2%80%9CDiceBear%E2%80%9D%2C%20licensed%20under%20%E2%80%9CCC0%201.0%E2%80%9D%20(https%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F)%3C%2Fdc%3Arights%3E%3C%2Frdf%3ADescription%3E%3C%2Frdf%3ARDF%3E%3C%2Fmetadata%3E%3Cdefs%3E%3Cg%20id%3D%22shoulders-sloped-8e1759c8%22%3E%3Cpath%20d%3D%22M3%2050C3%2013%2019.2%205%2039%205s36%208%2036%2045Z%22%20fill%3D%22%23345945%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22heads-oval-8e1759c8%22%3E%3Cellipse%20cx%3D%2231%22%20cy%3D%2238%22%20rx%3D%2218%22%20ry%3D%2221%22%20fill%3D%22%23345945%22%2F%3E%3C%2Fg%3E%3CclipPath%20id%3D%22clip-8e1759c8%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20rx%3D%220%22%20ry%3D%220%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url(%23clip-8e1759c8)%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23d0edec%22%2F%3E%3Cuse%20transform%3D%22translate(11%2051)%22%20href%3D%22%23shoulders-sloped-8e1759c8%22%2F%3E%3Cuse%20transform%3D%22translate(19%201)%22%20href%3D%22%23heads-oval-8e1759c8%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
%20--%3E%3Cmetadata%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Axsi%3D%22http%3A%2F%2Fwww.w3.org%2F2001%2FXMLSchema-instance%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Adcterms%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fterms%2F%22%3E%3Crdf%3ARDF%3E%3Crdf%3ADescription%3E%3Cdc%3Atitle%3EShadows%3C%2Fdc%3Atitle%3E%3Cdc%3Acreator%3EDiceBear%3C%2Fdc%3Acreator%3E%3Cdc%3Asource%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fwww.dicebear.com%3C%2Fdc%3Asource%3E%3Cdcterms%3Alicense%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F%3C%2Fdcterms%3Alicense%3E%3Cdc%3Arights%3E%E2%80%9CShadows%E2%80%9D%20(https%3A%2F%2Fwww.dicebear.com)%20by%20%E2%80%9CDiceBear%E2%80%9D%2C%20licensed%20under%20%E2%80%9CCC0%201.0%E2%80%9D%20(https%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F)%3C%2Fdc%3Arights%3E%3C%2Frdf%3ADescription%3E%3C%2Frdf%3ARDF%3E%3C%2Fmetadata%3E%3Cdefs%3E%3Cg%20id%3D%22shoulders-square-c5e40951%22%3E%3Cpath%20d%3D%22M4%2050V17C4%209%2010%203%2018%203h42c8%200%2014%206%2014%2014v33Z%22%20fill%3D%22%237b373f%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22tops-puffs-c5e40951%22%3E%3Cg%3E%3Cellipse%20cx%3D%2228%22%20cy%3D%2231%22%20rx%3D%2221%22%20ry%3D%2219%22%20fill%3D%22%237b373f%22%2F%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2219%22%20r%3D%228.5%22%20fill%3D%22%237b373f%22%2F%3E%3Ccircle%20cx%3D%2242%22%20cy%3D%2219%22%20r%3D%228.5%22%20fill%3D%22%237b373f%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20id%3D%22heads-oval-c5e40951%22%3E%3Cuse%20transform%3D%22matrix(.95%200%200%20.95%204.47%201.84)%20rotate(6%2C%2028%2C%2025)%22%20href%3D%22%23tops-puffs-c5e40951%22%2F%3E%3Cellipse%20cx%3D%2231%22%20cy%3D%2238%22%20rx%3D%2218%22%20ry%3D%2221%22%20fill%3D%22%237b373f%22%2F%3E%3C%2Fg%3E%3CclipPath%20id%3D%22clip-c5e40951%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20rx%3D%220%22%20ry%3D%220%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url(%23clip-c5e40951)%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23deedc2%22%2F%3E%3Cuse%20transform%3D%22translate(11%2051)%22%20href%3D%22%23shoulders-square-c5e40951%22%2F%3E%3Cuse%20transform%3D%22translate(19%201)%22%20href%3D%22%23heads-oval-c5e40951%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
%20--%3E%3Cmetadata%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Axsi%3D%22http%3A%2F%2Fwww.w3.org%2F2001%2FXMLSchema-instance%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Adcterms%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fterms%2F%22%3E%3Crdf%3ARDF%3E%3Crdf%3ADescription%3E%3Cdc%3Atitle%3EShadows%3C%2Fdc%3Atitle%3E%3Cdc%3Acreator%3EDiceBear%3C%2Fdc%3Acreator%3E%3Cdc%3Asource%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fwww.dicebear.com%3C%2Fdc%3Asource%3E%3Cdcterms%3Alicense%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F%3C%2Fdcterms%3Alicense%3E%3Cdc%3Arights%3E%E2%80%9CShadows%E2%80%9D%20(https%3A%2F%2Fwww.dicebear.com)%20by%20%E2%80%9CDiceBear%E2%80%9D%2C%20licensed%20under%20%E2%80%9CCC0%201.0%E2%80%9D%20(https%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F)%3C%2Fdc%3Arights%3E%3C%2Frdf%3ADescription%3E%3C%2Frdf%3ARDF%3E%3C%2Fmetadata%3E%3Cdefs%3E%3Cg%20id%3D%22shoulders-regular-578878e7%22%3E%3Cpath%20d%3D%22M6%2050C6%2017%2020.85%201%2039%201s33%2016%2033%2049Z%22%20fill%3D%22%235e3b87%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22tops-hat-578878e7%22%3E%3Cg%3E%3Cellipse%20cx%3D%2228%22%20cy%3D%2221%22%20rx%3D%2228%22%20ry%3D%225%22%20fill%3D%22%235e3b87%22%2F%3E%3Cpath%20d%3D%22M15%2021V8c0-5%2026-5%2026%200v13Z%22%20fill%3D%22%235e3b87%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20id%3D%22heads-wide-578878e7%22%3E%3Cuse%20transform%3D%22translate(.05%202.32)scale(1.11)%20rotate(-6%2C%2028%2C%2025)%22%20href%3D%22%23tops-hat-578878e7%22%2F%3E%3Cellipse%20cx%3D%2231%22%20cy%3D%2238%22%20rx%3D%2221%22%20ry%3D%2218%22%20fill%3D%22%235e3b87%22%2F%3E%3C%2Fg%3E%3CclipPath%20id%3D%22clip-578878e7%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20rx%3D%220%22%20ry%3D%220%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url(%23clip-578878e7)%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23d6eddf%22%2F%3E%3Cuse%20transform%3D%22translate(11%2051)%22%20href%3D%22%23shoulders-regular-578878e7%22%2F%3E%3Cuse%20transform%3D%22translate(19%201)%22%20href%3D%22%23heads-wide-578878e7%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
%20--%3E%3Cmetadata%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Axsi%3D%22http%3A%2F%2Fwww.w3.org%2F2001%2FXMLSchema-instance%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Adcterms%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fterms%2F%22%3E%3Crdf%3ARDF%3E%3Crdf%3ADescription%3E%3Cdc%3Atitle%3EShadows%3C%2Fdc%3Atitle%3E%3Cdc%3Acreator%3EDiceBear%3C%2Fdc%3Acreator%3E%3Cdc%3Asource%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fwww.dicebear.com%3C%2Fdc%3Asource%3E%3Cdcterms%3Alicense%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F%3C%2Fdcterms%3Alicense%3E%3Cdc%3Arights%3E%E2%80%9CShadows%E2%80%9D%20(https%3A%2F%2Fwww.dicebear.com)%20by%20%E2%80%9CDiceBear%E2%80%9D%2C%20licensed%20under%20%E2%80%9CCC0%201.0%E2%80%9D%20(https%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F)%3C%2Fdc%3Arights%3E%3C%2Frdf%3ADescription%3E%3C%2Frdf%3ARDF%3E%3C%2Fmetadata%3E%3Cdefs%3E%3Cg%20id%3D%22shoulders-uneven-7738eb3d%22%3E%3Cpath%20d%3D%22M6%2050C6%2015%2020%200%2039%201c18%201%2033%2018%2033%2049Z%22%20fill%3D%22%233b3b42%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22heads-wide-7738eb3d%22%3E%3Cellipse%20cx%3D%2231%22%20cy%3D%2238%22%20rx%3D%2221%22%20ry%3D%2218%22%20fill%3D%22%233b3b42%22%2F%3E%3C%2Fg%3E%3CclipPath%20id%3D%22clip-7738eb3d%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20rx%3D%220%22%20ry%3D%220%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url(%23clip-7738eb3d)%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23ede4e4%22%2F%3E%3Cuse%20transform%3D%22translate(11%2051)%22%20href%3D%22%23shoulders-uneven-7738eb3d%22%2F%3E%3Cuse%20transform%3D%22translate(19%201)%22%20href%3D%22%23heads-wide-7738eb3d%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
%20--%3E%3Cmetadata%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Axsi%3D%22http%3A%2F%2Fwww.w3.org%2F2001%2FXMLSchema-instance%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Adcterms%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fterms%2F%22%3E%3Crdf%3ARDF%3E%3Crdf%3ADescription%3E%3Cdc%3Atitle%3EShadows%3C%2Fdc%3Atitle%3E%3Cdc%3Acreator%3EDiceBear%3C%2Fdc%3Acreator%3E%3Cdc%3Asource%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fwww.dicebear.com%3C%2Fdc%3Asource%3E%3Cdcterms%3Alicense%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F%3C%2Fdcterms%3Alicense%3E%3Cdc%3Arights%3E%E2%80%9CShadows%E2%80%9D%20(https%3A%2F%2Fwww.dicebear.com)%20by%20%E2%80%9CDiceBear%E2%80%9D%2C%20licensed%20under%20%E2%80%9CCC0%201.0%E2%80%9D%20(https%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F)%3C%2Fdc%3Arights%3E%3C%2Frdf%3ADescription%3E%3C%2Frdf%3ARDF%3E%3C%2Fmetadata%3E%3Cdefs%3E%3Cg%20id%3D%22shoulders-sloped-4ad1698b%22%3E%3Cpath%20d%3D%22M3%2050C3%2013%2019.2%205%2039%205s36%208%2036%2045Z%22%20fill%3D%22%235e3b87%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22tops-afro-4ad1698b%22%3E%3Cg%3E%3Ccircle%20cx%3D%2228%22%20cy%3D%2229%22%20r%3D%2217.5%22%20fill%3D%22%235e3b87%22%2F%3E%3Ccircle%20cx%3D%2211.3%22%20cy%3D%2226%22%20r%3D%227.5%22%20fill%3D%22%235e3b87%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%227.5%22%20fill%3D%22%235e3b87%22%2F%3E%3Ccircle%20cx%3D%2225%22%20cy%3D%2212.3%22%20r%3D%227.5%22%20fill%3D%22%235e3b87%22%2F%3E%3Ccircle%20cx%3D%2235.2%22%20cy%3D%2213.6%22%20r%3D%227.5%22%20fill%3D%22%235e3b87%22%2F%3E%3Ccircle%20cx%3D%2243%22%20cy%3D%2221%22%20r%3D%227.5%22%20fill%3D%22%235e3b87%22%2F%3E%3Ccircle%20cx%3D%2245.2%22%20cy%3D%2231%22%20r%3D%227.5%22%20fill%3D%22%235e3b87%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20id%3D%22heads-tall-4ad1698b%22%3E%3Cuse%20transform%3D%22matrix(.89%200%200%20.89%205.95%20-.32)%22%20href%3D%22%23tops-afro-4ad1698b%22%2F%3E%3Cellipse%20cx%3D%2231%22%20cy%3D%2237%22%20rx%3D%2217%22%20ry%3D%2223%22%20fill%3D%22%235e3b87%22%2F%3E%3C%2Fg%3E%3CclipPath%20id%3D%22clip-4ad1698b%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20rx%3D%220%22%20ry%3D%220%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url(%23clip-4ad1698b)%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23dfe8ed%22%2F%3E%3Cuse%20transform%3D%22translate(11%2051)%22%20href%3D%22%23shoulders-sloped-4ad1698b%22%2F%3E%3Cuse%20transform%3D%22translate(19%201)%22%20href%3D%22%23heads-tall-4ad1698b%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
%20--%3E%3Cmetadata%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Axsi%3D%22http%3A%2F%2Fwww.w3.org%2F2001%2FXMLSchema-instance%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Adcterms%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fterms%2F%22%3E%3Crdf%3ARDF%3E%3Crdf%3ADescription%3E%3Cdc%3Atitle%3EShadows%3C%2Fdc%3Atitle%3E%3Cdc%3Acreator%3EDiceBear%3C%2Fdc%3Acreator%3E%3Cdc%3Asource%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fwww.dicebear.com%3C%2Fdc%3Asource%3E%3Cdcterms%3Alicense%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F%3C%2Fdcterms%3Alicense%3E%3Cdc%3Arights%3E%E2%80%9CShadows%E2%80%9D%20(https%3A%2F%2Fwww.dicebear.com)%20by%20%E2%80%9CDiceBear%E2%80%9D%2C%20licensed%20under%20%E2%80%9CCC0%201.0%E2%80%9D%20(https%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F)%3C%2Fdc%3Arights%3E%3C%2Frdf%3ADescription%3E%3C%2Frdf%3ARDF%3E%3C%2Fmetadata%3E%3Cdefs%3E%3Cg%20id%3D%22shoulders-square-9c30cdfa%22%3E%3Cpath%20d%3D%22M4%2050V17C4%209%2010%203%2018%203h42c8%200%2014%206%2014%2014v33Z%22%20fill%3D%22%236b4630%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22tops-curls-9c30cdfa%22%3E%3Cg%3E%3Ccircle%20cx%3D%2210.52%22%20cy%3D%2225.5%22%20r%3D%227%22%20fill%3D%22%236b4630%22%2F%3E%3Ccircle%20cx%3D%2218.5%22%20cy%3D%2216.95%22%20r%3D%227.5%22%20fill%3D%22%236b4630%22%2F%3E%3Ccircle%20cx%3D%2228.95%22%20cy%3D%2215.05%22%20r%3D%227.5%22%20fill%3D%22%236b4630%22%2F%3E%3Ccircle%20cx%3D%2239.4%22%20cy%3D%2217.9%22%20r%3D%227.5%22%20fill%3D%22%236b4630%22%2F%3E%3Ccircle%20cx%3D%2246.05%22%20cy%3D%2226.45%22%20r%3D%227%22%20fill%3D%22%236b4630%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20id%3D%22heads-round-9c30cdfa%22%3E%3Cuse%20transform%3D%22translate(3%203)%20rotate(3%2C%2028%2C%2025)%22%20href%3D%22%23tops-curls-9c30cdfa%22%2F%3E%3Ccircle%20cx%3D%2231%22%20cy%3D%2238%22%20r%3D%2219%22%20fill%3D%22%236b4630%22%2F%3E%3C%2Fg%3E%3CclipPath%20id%3D%22clip-9c30cdfa%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20rx%3D%220%22%20ry%3D%220%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url(%23clip-9c30cdfa)%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23deedc2%22%2F%3E%3Cuse%20transform%3D%22translate(11%2051)%22%20href%3D%22%23shoulders-square-9c30cdfa%22%2F%3E%3Cuse%20transform%3D%22translate(19%201)%22%20href%3D%22%23heads-round-9c30cdfa%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
%20--%3E%3Cmetadata%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Axsi%3D%22http%3A%2F%2Fwww.w3.org%2F2001%2FXMLSchema-instance%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Adcterms%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fterms%2F%22%3E%3Crdf%3ARDF%3E%3Crdf%3ADescription%3E%3Cdc%3Atitle%3EShadows%3C%2Fdc%3Atitle%3E%3Cdc%3Acreator%3EDiceBear%3C%2Fdc%3Acreator%3E%3Cdc%3Asource%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fwww.dicebear.com%3C%2Fdc%3Asource%3E%3Cdcterms%3Alicense%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F%3C%2Fdcterms%3Alicense%3E%3Cdc%3Arights%3E%E2%80%9CShadows%E2%80%9D%20(https%3A%2F%2Fwww.dicebear.com)%20by%20%E2%80%9CDiceBear%E2%80%9D%2C%20licensed%20under%20%E2%80%9CCC0%201.0%E2%80%9D%20(https%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F)%3C%2Fdc%3Arights%3E%3C%2Frdf%3ADescription%3E%3C%2Frdf%3ARDF%3E%3C%2Fmetadata%3E%3Cdefs%3E%3Cg%20id%3D%22shoulders-regular-cb77e6a4%22%3E%3Cpath%20d%3D%22M6%2050C6%2017%2020.85%201%2039%201s33%2016%2033%2049Z%22%20fill%3D%22%23733662%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22tops-waves-cb77e6a4%22%3E%3Cg%3E%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2223.5%22%20r%3D%227%22%20fill%3D%22%23733662%22%2F%3E%3Ccircle%20cx%3D%2227%22%20cy%3D%2219%22%20r%3D%227.5%22%20fill%3D%22%23733662%22%2F%3E%3Ccircle%20cx%3D%2239%22%20cy%3D%2222.5%22%20r%3D%228%22%20fill%3D%22%23733662%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20id%3D%22heads-wide-cb77e6a4%22%3E%3Cuse%20transform%3D%22translate(.05%202.32)scale(1.11)%20rotate(6%2C%2028%2C%2025)%22%20href%3D%22%23tops-waves-cb77e6a4%22%2F%3E%3Cellipse%20cx%3D%2231%22%20cy%3D%2238%22%20rx%3D%2221%22%20ry%3D%2218%22%20fill%3D%22%23733662%22%2F%3E%3C%2Fg%3E%3CclipPath%20id%3D%22clip-cb77e6a4%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20rx%3D%220%22%20ry%3D%220%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url(%23clip-cb77e6a4)%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23ede4e4%22%2F%3E%3Cuse%20transform%3D%22translate(11%2051)%22%20href%3D%22%23shoulders-regular-cb77e6a4%22%2F%3E%3Cuse%20transform%3D%22translate(19%201)%22%20href%3D%22%23heads-wide-cb77e6a4%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
%20--%3E%3Cmetadata%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Axsi%3D%22http%3A%2F%2Fwww.w3.org%2F2001%2FXMLSchema-instance%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Adcterms%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fterms%2F%22%3E%3Crdf%3ARDF%3E%3Crdf%3ADescription%3E%3Cdc%3Atitle%3EShadows%3C%2Fdc%3Atitle%3E%3Cdc%3Acreator%3EDiceBear%3C%2Fdc%3Acreator%3E%3Cdc%3Asource%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fwww.dicebear.com%3C%2Fdc%3Asource%3E%3Cdcterms%3Alicense%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F%3C%2Fdcterms%3Alicense%3E%3Cdc%3Arights%3E%E2%80%9CShadows%E2%80%9D%20(https%3A%2F%2Fwww.dicebear.com)%20by%20%E2%80%9CDiceBear%E2%80%9D%2C%20licensed%20under%20%E2%80%9CCC0%201.0%E2%80%9D%20(https%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F)%3C%2Fdc%3Arights%3E%3C%2Frdf%3ADescription%3E%3C%2Frdf%3ARDF%3E%3C%2Fmetadata%3E%3Cdefs%3E%3Cg%20id%3D%22shoulders-narrow-7bf16db2%22%3E%3Cpath%20d%3D%22M11%2050C11%2018%2023.6%200%2039%200s28%2018%2028%2050Z%22%20fill%3D%22%235b4e30%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22tops-bun-7bf16db2%22%3E%3Cg%3E%3Cellipse%20cx%3D%2228%22%20cy%3D%2231%22%20rx%3D%2221%22%20ry%3D%2219%22%20fill%3D%22%235b4e30%22%2F%3E%3Ccircle%20cx%3D%2236%22%20cy%3D%2210%22%20r%3D%227%22%20fill%3D%22%235b4e30%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20id%3D%22heads-oval-7bf16db2%22%3E%3Cuse%20transform%3D%22matrix(.95%200%200%20.95%204.47%201.84)%20rotate(6%2C%2028%2C%2025)%22%20href%3D%22%23tops-bun-7bf16db2%22%2F%3E%3Cellipse%20cx%3D%2231%22%20cy%3D%2238%22%20rx%3D%2218%22%20ry%3D%2221%22%20fill%3D%22%235b4e30%22%2F%3E%3C%2Fg%3E%3CclipPath%20id%3D%22clip-7bf16db2%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20rx%3D%220%22%20ry%3D%220%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url(%23clip-7bf16db2)%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23d6eddf%22%2F%3E%3Cuse%20transform%3D%22translate(11%2051)%22%20href%3D%22%23shoulders-narrow-7bf16db2%22%2F%3E%3Cuse%20transform%3D%22translate(19%201)%22%20href%3D%22%23heads-oval-7bf16db2%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
%20--%3E%3Cmetadata%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Axsi%3D%22http%3A%2F%2Fwww.w3.org%2F2001%2FXMLSchema-instance%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Adcterms%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fterms%2F%22%3E%3Crdf%3ARDF%3E%3Crdf%3ADescription%3E%3Cdc%3Atitle%3EShadows%3C%2Fdc%3Atitle%3E%3Cdc%3Acreator%3EDiceBear%3C%2Fdc%3Acreator%3E%3Cdc%3Asource%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fwww.dicebear.com%3C%2Fdc%3Asource%3E%3Cdcterms%3Alicense%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F%3C%2Fdcterms%3Alicense%3E%3Cdc%3Arights%3E%E2%80%9CShadows%E2%80%9D%20(https%3A%2F%2Fwww.dicebear.com)%20by%20%E2%80%9CDiceBear%E2%80%9D%2C%20licensed%20under%20%E2%80%9CCC0%201.0%E2%80%9D%20(https%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F)%3C%2Fdc%3Arights%3E%3C%2Frdf%3ADescription%3E%3C%2Frdf%3ARDF%3E%3C%2Fmetadata%3E%3Cdefs%3E%3Cg%20id%3D%22shoulders-round-b1bf144b%22%3E%3Cellipse%20cx%3D%2239%22%20cy%3D%2241%22%20rx%3D%2232%22%20ry%3D%2241%22%20fill%3D%22%2333477f%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22tops-afro-b1bf144b%22%3E%3Cg%3E%3Ccircle%20cx%3D%2228%22%20cy%3D%2229%22%20r%3D%2217.5%22%20fill%3D%22%2333477f%22%2F%3E%3Ccircle%20cx%3D%2211.3%22%20cy%3D%2226%22%20r%3D%227.5%22%20fill%3D%22%2333477f%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%227.5%22%20fill%3D%22%2333477f%22%2F%3E%3Ccircle%20cx%3D%2225%22%20cy%3D%2212.3%22%20r%3D%227.5%22%20fill%3D%22%2333477f%22%2F%3E%3Ccircle%20cx%3D%2235.2%22%20cy%3D%2213.6%22%20r%3D%227.5%22%20fill%3D%22%2333477f%22%2F%3E%3Ccircle%20cx%3D%2243%22%20cy%3D%2221%22%20r%3D%227.5%22%20fill%3D%22%2333477f%22%2F%3E%3Ccircle%20cx%3D%2245.2%22%20cy%3D%2231%22%20r%3D%227.5%22%20fill%3D%22%2333477f%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20id%3D%22heads-round-b1bf144b%22%3E%3Cuse%20transform%3D%22translate(3%203)%22%20href%3D%22%23tops-afro-b1bf144b%22%2F%3E%3Ccircle%20cx%3D%2231%22%20cy%3D%2238%22%20r%3D%2219%22%20fill%3D%22%2333477f%22%2F%3E%3C%2Fg%3E%3CclipPath%20id%3D%22clip-b1bf144b%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20rx%3D%220%22%20ry%3D%220%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url(%23clip-b1bf144b)%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23ede4e0%22%2F%3E%3Cuse%20transform%3D%22translate(11%2051)%22%20href%3D%22%23shoulders-round-b1bf144b%22%2F%3E%3Cuse%20transform%3D%22translate(19%201)%22%20href%3D%22%23heads-round-b1bf144b%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
%20--%3E%3Cmetadata%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Axsi%3D%22http%3A%2F%2Fwww.w3.org%2F2001%2FXMLSchema-instance%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Adcterms%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fterms%2F%22%3E%3Crdf%3ARDF%3E%3Crdf%3ADescription%3E%3Cdc%3Atitle%3EShadows%3C%2Fdc%3Atitle%3E%3Cdc%3Acreator%3EDiceBear%3C%2Fdc%3Acreator%3E%3Cdc%3Asource%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fwww.dicebear.com%3C%2Fdc%3Asource%3E%3Cdcterms%3Alicense%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F%3C%2Fdcterms%3Alicense%3E%3Cdc%3Arights%3E%E2%80%9CShadows%E2%80%9D%20(https%3A%2F%2Fwww.dicebear.com)%20by%20%E2%80%9CDiceBear%E2%80%9D%2C%20licensed%20under%20%E2%80%9CCC0%201.0%E2%80%9D%20(https%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F)%3C%2Fdc%3Arights%3E%3C%2Frdf%3ADescription%3E%3C%2Frdf%3ARDF%3E%3C%2Fmetadata%3E%3Cdefs%3E%3Cg%20id%3D%22shoulders-uneven-57e7caed%22%3E%3Cpath%20d%3D%22M6%2050C6%2015%2020%200%2039%201c18%201%2033%2018%2033%2049Z%22%20fill%3D%22%23345945%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22tops-braid-57e7caed%22%3E%3Cg%3E%3Ccircle%20cx%3D%229.9%22%20cy%3D%2226.5%22%20r%3D%224.5%22%20fill%3D%22%23345945%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2217.7%22%20r%3D%224.5%22%20fill%3D%22%23345945%22%2F%3E%3Ccircle%20cx%3D%2228%22%20cy%3D%2215%22%20r%3D%224.5%22%20fill%3D%22%23345945%22%2F%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%2217.7%22%20r%3D%224.5%22%20fill%3D%22%23345945%22%2F%3E%3Ccircle%20cx%3D%2246.1%22%20cy%3D%2226.5%22%20r%3D%224.5%22%20fill%3D%22%23345945%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20id%3D%22heads-oval-57e7caed%22%3E%3Cuse%20transform%3D%22matrix(.95%200%200%20.95%204.47%201.84)%22%20href%3D%22%23tops-braid-57e7caed%22%2F%3E%3Cellipse%20cx%3D%2231%22%20cy%3D%2238%22%20rx%3D%2218%22%20ry%3D%2221%22%20fill%3D%22%23345945%22%2F%3E%3C%2Fg%3E%3CclipPath%20id%3D%22clip-57e7caed%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20rx%3D%220%22%20ry%3D%220%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url(%23clip-57e7caed)%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23e8e4ed%22%2F%3E%3Cuse%20transform%3D%22translate(11%2051)%22%20href%3D%22%23shoulders-uneven-57e7caed%22%2F%3E%3Cuse%20transform%3D%22translate(19%201)%22%20href%3D%22%23heads-oval-57e7caed%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)