Avatar-placeholdergenerator (initialen en patronen)
Avatar-placeholdergenerator
Avatar-placeholdergenerator: initialen- en patroonavatars als SVG | We.Inc
Maak initialenavatars en geometrische patroonavatars van elke naam. Zelfde naam, zelfde avatar. Download SVG of PNG, kopieer een data-URI, of maak een heel team tegelijk. Inclusief React-code.
Een placeholder-avatar vervangt een profielfoto tot iemand er een uploadt. Het gebruikelijke patroon is de initialen van de persoon op een kleur die uit de naam wordt gekozen, zodat dezelfde naam altijd dezelfde avatar krijgt. Typ hieronder namen om avatars met initialen, een kleurverloop of een patroon te maken, en download dan SVG- of PNG-bestanden of kopieer de code.
Avatarstijlen in deze generator
Stijl
Ziet eruit als
Het best voor
Initialen
Twee letters op een effen kleur
Teampagina's, reacties, CRM's
Initialen met kleurverloop
Twee letters op een overgang van twee kleuren
Consumentenapps, speelse merken
Patroon
Een gespiegeld raster van 5 bij 5 vierkantjes
Anonieme gebruikers, testaccounts, bots
Voer één naam of een hele lijst in. Van elke naam wordt een hash gemaakt die de kleur en het patroon kiest, dus de resultaten blijven gelijk na herladen en op andere apparaten. De tekstkleur wordt automatisch op contrast gekozen. Er wordt niets geüpload.
Typ namen, één per regel. Gebruik echte namen, e-mailadressen of gebruikers-ID's; elk wordt één avatar.
Kies een stijl, een vorm (cirkel, afgerond of vierkant), een palet en een grootte.
Initialen komen van het eerste en laatste woord van de naam; bij één woord worden de eerste twee letters gebruikt.
Download een avatar als SVG of PNG, kopieer de SVG of data-URI, of kopieer de React-component die ze in uw eigen app maakt.
Maak een hash van een stabiele ID, niet van een weergavenaam, als mensen hun naam kunnen wijzigen. Anders verandert hun avatarkleur mee met de naam.
Houd initialen op twee letters. Drie letters worden op kleine formaten krap en slechter leesbaar.
Zet een avatar altijd samen met de naam van de persoon in de buurt of in de alt-tekst, want kleur en letters alleen identificeren niemand voor een schermlezer.
SVG-avatars blijven op elk formaat scherp en wegen een paar honderd bytes, dus u kunt ze direct genereren in plaats van afbeeldingsbestanden op te slaan.
Veelgestelde vragen
Hoe worden de kleuren gekozen?
De naam gaat door een kleine hashfunctie (FNV-1a) die er een getal van maakt, en dat getal kiest een kleur uit het palet. Dezelfde naam levert altijd hetzelfde getal op, dus de avatar verandert nooit, tenzij de naam verandert.
Is de tekstkleur toegankelijk?
Voor elke achtergrond berekent de generator met de WCAG-formule voor relatieve luminantie of zwarte of witte tekst meer contrast heeft, en gebruikt die. Pastelpaletten krijgen donkere tekst en sterkere kleuren krijgen witte tekst.
Mag ik deze avatars in een commercieel product gebruiken?
Ja. De avatars worden door uw eigen browser gemaakt op basis van uw invoer en zijn van u om te gebruiken. Het React-voorbeeld op deze pagina mag u gratis in elk project kopiëren.
Maakt dit nepmensen voor testdata?
Nee. Het maakt abstracte placeholders van namen die u opgeeft, wat voor demo's een veiligere keuze is dan foto's van echte of gegenereerde gezichten.
Waarom vaste avatars helpen
Wanneer iedereen overal dezelfde kleur houdt, herkennen mensen collega's in een lange lijst al voordat ze de naam lezen. Willekeurige kleuren bij elke paginalading maken dat ongedaan, en ze maken screenshots en tests ook onbetrouwbaar.
Hashing geeft stabiele resultaten zonder iets op te slaan. De server en de browser kunnen allebei dezelfde avatar tekenen vanuit dezelfde ID.
Renderen op grote schaal
Render voor lijsten met honderden mensen de SVG inline als component in plaats van afbeeldingsbestanden te maken. Dat slaat netwerkverzoeken volledig over en houdt de markup klein.
Hebt u een afbeeldings-URL nodig, bijvoorbeeld voor een e-mail of een Open Graph-tag, exporteer dan één keer per persoon een PNG en cache die, want veel e-mailprogramma's tonen geen SVG.
React-component voor een initialenavatar
Maakt een hash van de naam, kiest een kleur, kiest zwarte of witte tekst voor contrast en rendert een inline SVG. Geen afhankelijkheden.
Rustig
Pastel
Mono
Avatars maken
Namen, één per regel (maximaal 60)
Stijl
Initialen
Patroon
Vorm
Cirkel
Afgerond
Vierkant
Palet
Grootte: {n}px
Avatar voor {name}
Kopiëren
Gebruik het in React
Dezelfde initialenavatar als kleine component die u in elke React-app kunt zetten.