JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

JavaScript

var mapmarker = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var path1 = document.createElementNS("http://www.w3.org/2000/svg", 'path');
var path2 = document.createElementNS("http://www.w3.org/2000/svg", 'path');
var g1 = document.createElementNS("http://www.w3.org/2000/svg", "g");
var g2 = document.createElementNS("http://www.w3.org/2000/svg", "g");

g1.setAttribute('id', 'Map-Pin-Icon/Orange-Copy');
g2.setAttribute('id', 'Map-Pin-Icon')

mapmarker.setAttribute('class', 'marker');
mapmarker.setAttribute('viewbox', '0 0 13 16');
mapmarker.setAttribute('width', '13px');
mapmarker.setAttribute('height', '16px');

path1.setAttribute('d', 'M3.90604 7.68C6.06329 7.68 7.81208 5.96077 7.81208 3.84C7.81208 1.71923 6.06329 0 3.90604 0C1.74879 0 0 1.71923 0 3.84C0 5.96077 1.74879 7.68 3.90604 7.68Z');
path1.setAttribute('transform', 'translate(2.604027 1.92)');
path1.setAttribute('fill', '#FFF');
path1.setAttribute('stroke', 'none');


path2.setAttribute('d', 'M12.3691 6.27729C12.3691 2.78466 9.61525 0 6.2079 0C2.75388 0 0 2.78466 0 6.27729C0 9.86431 3.6874 14.1121 6.2079 16C8.7284 14.0177 12.3691 9.9115 12.3691 6.27729ZM8.99573 5.86667C8.99573 4.36959 7.71344 3.2 6.18456 3.2C4.60637 3.2 3.3734 4.36959 3.3734 5.86667C3.3734 7.31696 4.60637 8.53333 6.18456 8.53333C7.71344 8.53333 8.99573 7.31696 8.99573 5.86667Z');
path2.setAttribute('fill', '#EF7622');
path1.setAttribute('fill-rule', 'evenodd');
path2.setAttribute('stroke', 'none');

g2.appendChild(path2);
g2.appendChild(path1);
g1.appendChild(g2)
mapmarker.appendChild(g1);
document.body.appendChild(mapmarker);