JSFiddle - React, Tailwind, and code Playground

svg pp initials

by Destan Sarpkaya

HTML

<img width="300" id='image' src="https://via.placeholder.com/140x100">

<img id='image2' src="https://via.placeholder.com/140x100">

<img width="32" id='image3' src="https://via.placeholder.com/140x100">

CSS

body {background: gray}

JavaScript

function profilePhoto(text, color) {
	return `<svg version="1.1"
     width="100px" height="100px"
     xmlns="http://www.w3.org/2000/svg">
  <circle cx="50%" cy="50%" r="50%" fill="${color}" />

  <text dominant-baseline="central" x="50%" y="50%" font-size="50" text-anchor="middle" fill="white" style="font-family: sans-serif;font-weight: bold;">
    ${text}
  </text>
</svg>`;
}

const s = profilePhoto('DS', 'orange');
image.src = "data:image/svg+xml;base64," + btoa(s)
image2.src = "data:image/svg+xml;base64," + btoa(s)
image3.src = "data:image/svg+xml;base64," + btoa(s)