bikeavatar

Aus jedem Namen ein farbiges Rennrad mit eigener Geometrie vor einem Marble-Hintergrund. Gleicher Name, gleiches Rad. Wie boringavatars (Stil Marble, Palette Pop), nur mit Fahrrad.

Name Palette (optional, Hex mit Komma) eckig statt rund

URL:

HTTP-API

Ein SVG pro Name, Größe in Pixeln, Palette optional, square für eckig. Antwort ist image/svg+xml, mit CORS-Freigabe, einen Tag lang cachebar.

<img src="https://dev.martin-boehlig.de/bikeavatar/80/Maria%20Mitchell">
<img src="https://dev.martin-boehlig.de/bikeavatar/80/Maria%20Mitchell?colors=264653,2a9d8f,e9c46a,f4a261,e76f51">
<img src="https://dev.martin-boehlig.de/bikeavatar/80/Maria%20Mitchell?square">

Ohne Größe (/bikeavatar/Maria) sind es 80 px. Größe 8 bis 1024. Der Hintergrund ist der Marble-Stil von boringavatars mit drei Farben aus der Palette (Standard: Palette „Pop“), das Rad bekommt die Palettenfarbe mit dem größten Kontrast dazu. Rahmenhöhe, Oberrohr, Radstand, Sitzrohrwinkel, Steuerrohr, Sattel- und Lenkerhöhe hängen vom Namen ab.

React

Die beiden Dateien BikeAvatar.js und bike.mjs ins Projekt kopieren, kein Build-Schritt nötig, keine Abhängigkeit außer React.

import BikeAvatar from "./BikeAvatar.js";

<BikeAvatar name="Maria Mitchell" size={80} />
<BikeAvatar name="Maria Mitchell" size={80} colors={["#264653", "#2a9d8f", "#e9c46a"]} />
<BikeAvatar name="Maria Mitchell" size={80} square />

Props: name, size (Standard 80), colors (Array), square, title (false = kein <title>). Weitere Props landen am <svg>.

Quelltext: git/Martin/bikeavatar