JSFiddle - React, Tailwind, and code Playground

Accedo logo svg

by Csaba Hellinger

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.2.4/svg.js"></script>
<div class="bg">
    <div id="svg">    
    </div>
</div>

CSS

.bg {
    //background-image: url('https://ibin.co/2RCVDVj7YBLX');
    background-color: gray;
    background-size: 400% 200%;
    background-position: -925px -170px;
    width: 350px;
    height: 340px;
    position: relative;
}

#svg {
    position: absolute;
    top: 76px;
    left: 49px;
    bottom: 69px;
    right: 33px;
    //background-color: rgba(0,0,0, 0.1);
    background-color: white;
}

#svg svg {
//    -webkit-filter: drop-shadow(2px 2px 5px black);    
}

JavaScript

var draw = SVG('svg').size('100%', '100%'),
    plus, blue, orange, magenta,
    green, purple, red, maroon;
    
function intersect(shape, withShape, color) {	
	return shape.clone().front().fill(color).maskWith(withShape.clone().fill('white'));
}

plus = draw.path(
	'M 26,69 C 16,69  16,59  26,59 C 44,59 52,51 52,31 ' +
            'C 52,21  63,21  63,31 C 63,51 71,59 87,59 ' +
            'C 97,59  97,69  87,69 C 71,69 63,77 63,97 ' +
            'C 63,107 52,107 52,97 C 52,77 46,69 26,69 Z' 
);
blue = draw.rect('100%','100%').fill('#00A4E3').maskWith(
    draw.mask()
        .add(draw.ellipse(220, 125).move(-105, 70).fill('white'))  // big ellipse  
        .add(draw.ellipse(170, 110).move(-105, 85).fill('black'))  // ellipse cutout
        .add(draw.rect(225, 145).radius(35).fill('white'))         // rounded rect
        .add(plus.fill('black'))                                   // plus sign
);
orange = draw.rect(132, 106).radius(35).move(114,88).fill('#FFD200');
magenta = draw.rect(82, 128).radius(35).move(185,19).fill('#D82A91');
green = intersect(orange, blue, '#72A432');
purple = intersect(magenta, blue, '#812890');
red = intersect(magenta, orange, '#EC1B22');
maroon = intersect(green, purple, '#80003E');

draw.viewbox(0,0,268,195);

console.log(draw.svg())