Druplicon SVG

by corbacho

HTML

<div class="druplicon svg"></div>
<div class="druplicon svg"></div>
<div class="druplicon svg"></div>
<div class="druplicon svg"></div>
<div class="druplicon svg"></div>
<br>
<div class="druplicon png"></div>
<div class="druplicon png"></div>
<div class="druplicon png"></div>
<div class="druplicon png"></div>
<div class="druplicon png"></div>

CSS

.druplicon { 
    display:inline-block;
    width:100px;
    height:125px;
    background-repeat:no-repeat;
    background-size:cover;
    background-image: 
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792" enable-background="new 0 0 612 792"><path opacity=".2" fill="#303030" enable-background="new" d="M612 449.3c0 178.6-140.9 296.5-303.2 296.5-110.5 0-213.6-59.3-268.2-152.1l6.5-.3c14.1 12.8 36.4 27.7 79.5 27 51.2-.7 60.6-9.4 105.8-29.6 243.9-109.2 289.1-208.9 297.8-231.8 8.7-22.9 21.6-60 8.1-101.1-2.6-7.9-4.5-14.3-5.8-19.4-32.4-36.2-64.6-56.1-74.3-62.1-1.5-1-3.1-1.9-4.6-2.8l4.7 2.8c21.6 13.4 153.7 94.3 153.7 272.9z"/><path fill="#fff" d="M403.6 594.7c10.8 0 22.3.7 30.4 6.1s12.8 17.5 15.5 24.3 0 10.8-5.4 13.5c-4.7 2.7-5.4 1.3-10.1-7.4-4.7-8.7-8.8-17.5-32.3-17.5s-31 8.1-42.4 17.5-15.5 12.8-19.6 7.4c-4.1-5.4-2.7-10.8 4.7-17.5s19.6-17.5 31-22.3 17.4-4.1 28.2-4.1zM291.8 671.5c13.5 10.8 33.7 19.6 76.8 19.6s73.4-12.2 86.9-22.3c6.1-4.7 8.8-.7 9.4 2s2 6.7-2.7 11.5c-3.4 3.4-34.3 25-70.8 28.3-36.5 3.3-85.5 5.4-115.2-21.6-4.7-4.7-3.4-11.5 0-14.2 3.4-2.7 6.1-4.7 10.1-4.7 4 .1 3.4.1 5.5 1.4z"/><path opacity=".2" fill="#aaa" enable-background="new" d="M530.3 358.9c-8.7 22.9-53.9 122.6-297.8 231.8-45.2 20.2-54.6 28.9-105.8 29.6-43.1.7-65.4-14.2-79.5-27l-6.5.3h-.1c-25.7-43.4-40.6-94.3-40.6-149.8 0-84.3 31.9-146.6 67.5-189.9 1.2-1.4 2.3-2.8 3.5-4.1 28.8-33.8 59.6-55.5 77.5-66.6.4-.3.8-.5 1.2-.7 4.5-2.7 8.1-4.8 10.6-6.1 29.6-16.2 51.2-24.3 85.5-51.2 1.3-1 2.6-2 3.8-3.1l.1-.1c9.4-8.1 17.6-18.9 23.4-36.5v-.1c3.5-10.4 6.1-23.2 7.7-39.2l.2.2c24.2 28.9 53.2 63.2 74 76.7 7.4 4.8 14.8 9.1 22.2 12.9l3.2 1.6c24.1 12.1 48.4 20.9 73.1 35.8l4.6 2.8c9.7 6 41.9 25.9 74.3 62.1 1.3 5.1 3.2 11.5 5.8 19.4 13.7 41.2.8 78.3-7.9 101.2z"/><path opacity=".5" fill="#333" enable-background="new" d="M458.2 176.3c-35-22.3-69.4-31-103.1-53.2-20.8-13.6-49.8-48-74-76.9-4.7 46.5-18.1 66-35 78.9-34.3 27-55.9 35-85.5 51.2-25.1 13.5-160.6 93.7-160.6 267.5 0 55.5...

JavaScript

// Druplicon SVG
var elements = document.getElementsByClassName("druplicon svg");
var random_color = '#'+Math.floor(Math.random()*16777215).toString(16);
var random_color2 = '#'+Math.floor(Math.random()*16777215).toString(16);

elements[0].style.backgroundColor = '#0077C0';
elements[1].style.backgroundColor = 'white';
elements[2].style.backgroundColor = 'black';
elements[3].style.backgroundColor = random_color;
elements[4].style.backgroundColor = random_color2;

var elements = document.getElementsByClassName("druplicon png");
elements[0].style.backgroundColor = '#0077C0';
elements[1].style.backgroundColor = 'white';
elements[2].style.backgroundColor = 'black';
elements[3].style.backgroundColor = random_color;
elements[4].style.backgroundColor = random_color2;