I have two identical blocks with a color picker (the paint bucket). I can select and change background with this, and it works well. However, I'm unable to figure out how to set the background color on each blocks parent, it only changes the color on the first block.
I also don't know how to open the color picker so it attaches to each block instead of showing only on the first block. Any suggestions?
jQuery(function() {
jQuery(".color").click(function(){
var color = jQuery(this).attr("data-value");
jQuery(this).closest(".select_background").css("background-color", color);
});
if (Modernizr.inputtypes.color) {
jQuery(this).closest(".picker").css("display", 'inline-block');
var c = document.getElementById('colorpicker');
c.addEventListener('change', function(e) {
//d.innerHTML = c.value;
var color = c.value;
jQuery(this).closest(".select_background").css("background-color", color);
}, false);
}
});
function pickColor() {
jQuery("#colorpicker").click();
}.select_background.left {
float: left;
}
.select_background.right {
float: right;
}
.select_background {
width: 300px;
height: 100px;
background-color: red;
margin-bottom: 20px;
}
<style>
#bg-selector {
font-size: 1em;
font-style: italic;
}
.color_pick {
position: absolute;
right: 32px;
top: 105px;
width: 23px;
}
.color {
width: 22px;
height: 22px;
display: inline-block;
margin: 0 0 0 0.2em;
cursor: pointer;
padding: 2px;
}
.color img {
max-width: 100%;
max-height: 100%;
display: block;
}
#colorpicker { visibility: hidden; }<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
<div onclick="pickColor();"><img src='data:image/svg xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
<g><g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"><path d="M3334.5,4985.3c-371.8-92-649.6-318.1-818.3-665c-118.8-247.2-128.4-339.2-130.3-1291.6v-833.6l-164.8-182c-873.8-962-1370.1-1787.9-1374-2290c0-116.9,7.7-170.6,36.4-224.2c19.2-38.3,270.2-304.7,553.8-592.1l517.4-519.3l297,11.5c333.4,15.3,429.2,36.4,668.8,149.5c145.6,70.9,180.1,80.5,308.5,80.5c107.3,0,161-7.6,212.7-36.4c38.3-21.1,484.8-448.4,990.7-948.6c733.9-728.2,923.6-925.5,942.8-983c34.5-107.3,9.6-231.9-59.4-310.4c-74.7-84.3-318.1-216.5-624.7-337.3c-134.1-53.7-249.1-101.6-254.9-105.4c-15.3-17.3,565.3-586.4,651.5-636.2c74.7-46,107.3-51.7,249.1-51.7c201.2,0,366,47.9,661.1,191.6C7000.4-4099.7,8418.4-2783.2,9206-1608.6c335.4,502.1,521.2,927.5,525,1207.3c3.8,233.8-9.6,256.8-385.2,638.1C9160,422.7,9002.9,576,8993.3,576c-7.6,0-15.3-63.2-15.3-138c0-320-139.9-645.8-459.9-1078.9c-350.7-475.2-490.5-569.1-699.4-471.4C7728.6-1070.1,5933,723.5,5885.1,819.4c-55.5,111.1-74.7,243.4-49.8,356.4c23,115,63.2,182,283.6,467.6c147.6,193.5,300.9,458,360.3,620.9c15.4,46,53.7,222.3,84.3,390.9l55.6,306.6L6078.7,3506c-348.8,350.7-567.2,555.7-617.1,578.7c-126.5,59.4-312.4,49.8-596-32.6c-36.4-9.6-46,5.8-93.9,139.9C4562.9,4788,3934.3,5134.8,3334.5,4985.3z M3786.8,4676.8c333.4-63.2,597.9-312.3,697.5-661.1c28.7-95.8,28.7-116.9,7.7-128.4c-565.3-325.8-1036.7-676.4-1571.3-1168.9c-101.6-92-189.7-168.6-197.4-168.6c-19.2,0-13.4,1222.6,7.7,1370.1c28.7,197.4,124.6,381.3,274,521.2C3231.1,4651.9,3493.6,4732.4,3786.8,4676.8z M5356.2,3758.9c70.9-132.2-95.8-569.1-392.8-1036.7l-115-180.1l-5.7,573c-1.9,314.3,0,574.9,3.8,578.7c3.8,3.8,67.1,28.7,138,53.7C5153.1,3806.8,5327.5,3812.6,5356.2,3758.9z M4442.1,2015.1C4035.9,1511.1,3290.5,781,2734.8,346C2259.5-23.8,1707.6-336.2,1416.3-395.6c-149.5-30.6-159-30.6-208.9,1.9c-51.7,34.5-51.7,40.3-42.2,155.2c34.5,362.2,452.2,1057.8,1080.8,1793.6c243.4,285.5,873.8,916,1165.1,1165.1c287.4,247.2,674.5,540.4,912.2,687.9l180.1,115l5.7-709l3.8-710.9L4442.1,2015.1z M4838.8,1045.5V116.1h-162.9H4513v737.8v737.8l157.1,191.6c88.1,105.4,161,191.6,162.9,191.6C4836.9,1974.9,4838.8,1557.1,4838.8,1045.5z M4275.4,392c-214.6-316.2,11.5-755,387.1-755c162.9,0,251,34.5,358.4,143.7c174.4,172.5,195.5,427.3,51.7,619l-46,65.2l111.1,115l113.1,113l70.9-78.6c116.9-130.3,157.1-262.5,157.1-498.2c0-262.5-42.2-373.7-203.1-548.1c-254.9-272.1-619-343-952.4-185.9C4198.8-558.4,4018.7-386,3959.2-271c-145.6,283.6-116.9,632.4,69,875.7l69,90.1l113.1-115l115-115L4275.4,392z"/><path d="M6870.1,2507.6c-61.3-394.7-228-735.9-573-1172.8c-65.2-80.5-126.5-168.6-136.1-195.5c-47.9-120.7-32.6-139.9,902.6-1071.2l881.5-881.5l115,124.6c141.8,155.2,327.7,413.9,435,609.4c120.7,222.3,153.3,348.8,166.7,691.8l13.4,295.1l-877.7,877.7c-484.8,484.8-885.3,879.6-891.1,879.6C6898.8,2664.7,6883.5,2593.8,6870.1,2507.6z"/><path d="M657.5-1623.9c-218.5-220.4-274-287.5-325.8-398.6c-57.5-120.7-63.2-147.5-63.2-314.2c0-162.9,5.7-195.5,59.4-306.6c170.5-360.3,563.4-519.3,937.1-381.3c438.8,162.9,609.4,724.3,339.2,1113.4c-32.6,46-164.8,187.8-295.1,318.1C981.4-1273.2,1008.2-1271.3,657.5-1623.9z"/><path d="M3047.1-1752.3c-212.7-101.6-369.8-147.6-536.6-157.1c-84.3-3.8-174.4-11.5-199.3-17.3c-42.2-9.6,57.5-115,900.7-958.1c519.3-521.2,954.3-946.7,963.9-946.7c72.8,0,873.8,350.7,873.8,383.3c0,5.7-394.8,404.3-877.7,887.2C3181.2-1572.2,3279-1641.1,3047.1-1752.3z"/></g></g>
</svg>' />
</div>
<input id="colorpicker" type="color" />
</div>
<div >
<div onclick="pickColor();"><img src='data:image/svg xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
<g><g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"><path d="M3334.5,4985.3c-371.8-92-649.6-318.1-818.3-665c-118.8-247.2-128.4-339.2-130.3-1291.6v-833.6l-164.8-182c-873.8-962-1370.1-1787.9-1374-2290c0-116.9,7.7-170.6,36.4-224.2c19.2-38.3,270.2-304.7,553.8-592.1l517.4-519.3l297,11.5c333.4,15.3,429.2,36.4,668.8,149.5c145.6,70.9,180.1,80.5,308.5,80.5c107.3,0,161-7.6,212.7-36.4c38.3-21.1,484.8-448.4,990.7-948.6c733.9-728.2,923.6-925.5,942.8-983c34.5-107.3,9.6-231.9-59.4-310.4c-74.7-84.3-318.1-216.5-624.7-337.3c-134.1-53.7-249.1-101.6-254.9-105.4c-15.3-17.3,565.3-586.4,651.5-636.2c74.7-46,107.3-51.7,249.1-51.7c201.2,0,366,47.9,661.1,191.6C7000.4-4099.7,8418.4-2783.2,9206-1608.6c335.4,502.1,521.2,927.5,525,1207.3c3.8,233.8-9.6,256.8-385.2,638.1C9160,422.7,9002.9,576,8993.3,576c-7.6,0-15.3-63.2-15.3-138c0-320-139.9-645.8-459.9-1078.9c-350.7-475.2-490.5-569.1-699.4-471.4C7728.6-1070.1,5933,723.5,5885.1,819.4c-55.5,111.1-74.7,243.4-49.8,356.4c23,115,63.2,182,283.6,467.6c147.6,193.5,300.9,458,360.3,620.9c15.4,46,53.7,222.3,84.3,390.9l55.6,306.6L6078.7,3506c-348.8,350.7-567.2,555.7-617.1,578.7c-126.5,59.4-312.4,49.8-596-32.6c-36.4-9.6-46,5.8-93.9,139.9C4562.9,4788,3934.3,5134.8,3334.5,4985.3z M3786.8,4676.8c333.4-63.2,597.9-312.3,697.5-661.1c28.7-95.8,28.7-116.9,7.7-128.4c-565.3-325.8-1036.7-676.4-1571.3-1168.9c-101.6-92-189.7-168.6-197.4-168.6c-19.2,0-13.4,1222.6,7.7,1370.1c28.7,197.4,124.6,381.3,274,521.2C3231.1,4651.9,3493.6,4732.4,3786.8,4676.8z M5356.2,3758.9c70.9-132.2-95.8-569.1-392.8-1036.7l-115-180.1l-5.7,573c-1.9,314.3,0,574.9,3.8,578.7c3.8,3.8,67.1,28.7,138,53.7C5153.1,3806.8,5327.5,3812.6,5356.2,3758.9z M4442.1,2015.1C4035.9,1511.1,3290.5,781,2734.8,346C2259.5-23.8,1707.6-336.2,1416.3-395.6c-149.5-30.6-159-30.6-208.9,1.9c-51.7,34.5-51.7,40.3-42.2,155.2c34.5,362.2,452.2,1057.8,1080.8,1793.6c243.4,285.5,873.8,916,1165.1,1165.1c287.4,247.2,674.5,540.4,912.2,687.9l180.1,115l5.7-709l3.8-710.9L4442.1,2015.1z M4838.8,1045.5V116.1h-162.9H4513v737.8v737.8l157.1,191.6c88.1,105.4,161,191.6,162.9,191.6C4836.9,1974.9,4838.8,1557.1,4838.8,1045.5z M4275.4,392c-214.6-316.2,11.5-755,387.1-755c162.9,0,251,34.5,358.4,143.7c174.4,172.5,195.5,427.3,51.7,619l-46,65.2l111.1,115l113.1,113l70.9-78.6c116.9-130.3,157.1-262.5,157.1-498.2c0-262.5-42.2-373.7-203.1-548.1c-254.9-272.1-619-343-952.4-185.9C4198.8-558.4,4018.7-386,3959.2-271c-145.6,283.6-116.9,632.4,69,875.7l69,90.1l113.1-115l115-115L4275.4,392z"/><path d="M6870.1,2507.6c-61.3-394.7-228-735.9-573-1172.8c-65.2-80.5-126.5-168.6-136.1-195.5c-47.9-120.7-32.6-139.9,902.6-1071.2l881.5-881.5l115,124.6c141.8,155.2,327.7,413.9,435,609.4c120.7,222.3,153.3,348.8,166.7,691.8l13.4,295.1l-877.7,877.7c-484.8,484.8-885.3,879.6-891.1,879.6C6898.8,2664.7,6883.5,2593.8,6870.1,2507.6z"/><path d="M657.5-1623.9c-218.5-220.4-274-287.5-325.8-398.6c-57.5-120.7-63.2-147.5-63.2-314.2c0-162.9,5.7-195.5,59.4-306.6c170.5-360.3,563.4-519.3,937.1-381.3c438.8,162.9,609.4,724.3,339.2,1113.4c-32.6,46-164.8,187.8-295.1,318.1C981.4-1273.2,1008.2-1271.3,657.5-1623.9z"/><path d="M3047.1-1752.3c-212.7-101.6-369.8-147.6-536.6-157.1c-84.3-3.8-174.4-11.5-199.3-17.3c-42.2-9.6,57.5-115,900.7-958.1c519.3-521.2,954.3-946.7,963.9-946.7c72.8,0,873.8,350.7,873.8,383.3c0,5.7-394.8,404.3-877.7,887.2C3181.2-1572.2,3279-1641.1,3047.1-1752.3z"/></g></g>
</svg>' />
</div>
<input id="colorpicker" type="color" />
</div>CodePudding user response：
The issue with your code is because you used the same id on multiple elements. id attributes need to be unique.
To fix your code use a common class on the color picker input, like you did with the div elements, and use closest()/find() to traverse the DOM to find it from the related icon/color example.
Also, your feature detection logic for the color picker is flawed; all it does is convert the jQuery code to JS. This will have no bearing on whether the control is available within the user's browser or not. In fact, you don't need to feature detect color picker controls as they're now well supported.
Here's a working example with all the above points addressed:
jQuery($ => {
$(".select_background").on('click', e => {
var color = $(e.target).data("value");
$(e.target).find('.colorpicker').click();
});
$('.colorpicker').on('input', e => {
$(e.target).closest('.select_background').css("background-color", e.target.value);
});
});.select_background.left {
float: left;
}
.select_background.right {
float: right;
}
.select_background {
width: 300px;
height: 100px;
background-color: red;
margin-bottom: 20px;
}
#bg-selector {
font-size: 1em;
font-style: italic;
}
.color_pick {
position: absolute;
right: 32px;
top: 105px;
width: 23px;
}
.color {
width: 22px;
height: 22px;
display: inline-block;
margin: 0 0 0 0.2em;
cursor: pointer;
padding: 2px;
}
.color img {
max-width: 100%;
max-height: 100%;
display: block;
}
.colorpicker {
visibility: hidden;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
<div >
<img src='data:image/svg xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
<g><g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"><path d="M3334.5,4985.3c-371.8-92-649.6-318.1-818.3-665c-118.8-247.2-128.4-339.2-130.3-1291.6v-833.6l-164.8-182c-873.8-962-1370.1-1787.9-1374-2290c0-116.9,7.7-170.6,36.4-224.2c19.2-38.3,270.2-304.7,553.8-592.1l517.4-519.3l297,11.5c333.4,15.3,429.2,36.4,668.8,149.5c145.6,70.9,180.1,80.5,308.5,80.5c107.3,0,161-7.6,212.7-36.4c38.3-21.1,484.8-448.4,990.7-948.6c733.9-728.2,923.6-925.5,942.8-983c34.5-107.3,9.6-231.9-59.4-310.4c-74.7-84.3-318.1-216.5-624.7-337.3c-134.1-53.7-249.1-101.6-254.9-105.4c-15.3-17.3,565.3-586.4,651.5-636.2c74.7-46,107.3-51.7,249.1-51.7c201.2,0,366,47.9,661.1,191.6C7000.4-4099.7,8418.4-2783.2,9206-1608.6c335.4,502.1,521.2,927.5,525,1207.3c3.8,233.8-9.6,256.8-385.2,638.1C9160,422.7,9002.9,576,8993.3,576c-7.6,0-15.3-63.2-15.3-138c0-320-139.9-645.8-459.9-1078.9c-350.7-475.2-490.5-569.1-699.4-471.4C7728.6-1070.1,5933,723.5,5885.1,819.4c-55.5,111.1-74.7,243.4-49.8,356.4c23,115,63.2,182,283.6,467.6c147.6,193.5,300.9,458,360.3,620.9c15.4,46,53.7,222.3,84.3,390.9l55.6,306.6L6078.7,3506c-348.8,350.7-567.2,555.7-617.1,578.7c-126.5,59.4-312.4,49.8-596-32.6c-36.4-9.6-46,5.8-93.9,139.9C4562.9,4788,3934.3,5134.8,3334.5,4985.3z M3786.8,4676.8c333.4-63.2,597.9-312.3,697.5-661.1c28.7-95.8,28.7-116.9,7.7-128.4c-565.3-325.8-1036.7-676.4-1571.3-1168.9c-101.6-92-189.7-168.6-197.4-168.6c-19.2,0-13.4,1222.6,7.7,1370.1c28.7,197.4,124.6,381.3,274,521.2C3231.1,4651.9,3493.6,4732.4,3786.8,4676.8z M5356.2,3758.9c70.9-132.2-95.8-569.1-392.8-1036.7l-115-180.1l-5.7,573c-1.9,314.3,0,574.9,3.8,578.7c3.8,3.8,67.1,28.7,138,53.7C5153.1,3806.8,5327.5,3812.6,5356.2,3758.9z M4442.1,2015.1C4035.9,1511.1,3290.5,781,2734.8,346C2259.5-23.8,1707.6-336.2,1416.3-395.6c-149.5-30.6-159-30.6-208.9,1.9c-51.7,34.5-51.7,40.3-42.2,155.2c34.5,362.2,452.2,1057.8,1080.8,1793.6c243.4,285.5,873.8,916,1165.1,1165.1c287.4,247.2,674.5,540.4,912.2,687.9l180.1,115l5.7-709l3.8-710.9L4442.1,2015.1z M4838.8,1045.5V116.1h-162.9H4513v737.8v737.8l157.1,191.6c88.1,105.4,161,191.6,162.9,191.6C4836.9,1974.9,4838.8,1557.1,4838.8,1045.5z M4275.4,392c-214.6-316.2,11.5-755,387.1-755c162.9,0,251,34.5,358.4,143.7c174.4,172.5,195.5,427.3,51.7,619l-46,65.2l111.1,115l113.1,113l70.9-78.6c116.9-130.3,157.1-262.5,157.1-498.2c0-262.5-42.2-373.7-203.1-548.1c-254.9-272.1-619-343-952.4-185.9C4198.8-558.4,4018.7-386,3959.2-271c-145.6,283.6-116.9,632.4,69,875.7l69,90.1l113.1-115l115-115L4275.4,392z"/><path d="M6870.1,2507.6c-61.3-394.7-228-735.9-573-1172.8c-65.2-80.5-126.5-168.6-136.1-195.5c-47.9-120.7-32.6-139.9,902.6-1071.2l881.5-881.5l115,124.6c141.8,155.2,327.7,413.9,435,609.4c120.7,222.3,153.3,348.8,166.7,691.8l13.4,295.1l-877.7,877.7c-484.8,484.8-885.3,879.6-891.1,879.6C6898.8,2664.7,6883.5,2593.8,6870.1,2507.6z"/><path d="M657.5-1623.9c-218.5-220.4-274-287.5-325.8-398.6c-57.5-120.7-63.2-147.5-63.2-314.2c0-162.9,5.7-195.5,59.4-306.6c170.5-360.3,563.4-519.3,937.1-381.3c438.8,162.9,609.4,724.3,339.2,1113.4c-32.6,46-164.8,187.8-295.1,318.1C981.4-1273.2,1008.2-1271.3,657.5-1623.9z"/><path d="M3047.1-1752.3c-212.7-101.6-369.8-147.6-536.6-157.1c-84.3-3.8-174.4-11.5-199.3-17.3c-42.2-9.6,57.5-115,900.7-958.1c519.3-521.2,954.3-946.7,963.9-946.7c72.8,0,873.8,350.7,873.8,383.3c0,5.7-394.8,404.3-877.7,887.2C3181.2-1572.2,3279-1641.1,3047.1-1752.3z"/></g></g>
</svg>' />
</div>
<input type="color" />
</div>
<div >
<div >
<img src='data:image/svg xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
<g><g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"><path d="M3334.5,4985.3c-371.8-92-649.6-318.1-818.3-665c-118.8-247.2-128.4-339.2-130.3-1291.6v-833.6l-164.8-182c-873.8-962-1370.1-1787.9-1374-2290c0-116.9,7.7-170.6,36.4-224.2c19.2-38.3,270.2-304.7,553.8-592.1l517.4-519.3l297,11.5c333.4,15.3,429.2,36.4,668.8,149.5c145.6,70.9,180.1,80.5,308.5,80.5c107.3,0,161-7.6,212.7-36.4c38.3-21.1,484.8-448.4,990.7-948.6c733.9-728.2,923.6-925.5,942.8-983c34.5-107.3,9.6-231.9-59.4-310.4c-74.7-84.3-318.1-216.5-624.7-337.3c-134.1-53.7-249.1-101.6-254.9-105.4c-15.3-17.3,565.3-586.4,651.5-636.2c74.7-46,107.3-51.7,249.1-51.7c201.2,0,366,47.9,661.1,191.6C7000.4-4099.7,8418.4-2783.2,9206-1608.6c335.4,502.1,521.2,927.5,525,1207.3c3.8,233.8-9.6,256.8-385.2,638.1C9160,422.7,9002.9,576,8993.3,576c-7.6,0-15.3-63.2-15.3-138c0-320-139.9-645.8-459.9-1078.9c-350.7-475.2-490.5-569.1-699.4-471.4C7728.6-1070.1,5933,723.5,5885.1,819.4c-55.5,111.1-74.7,243.4-49.8,356.4c23,115,63.2,182,283.6,467.6c147.6,193.5,300.9,458,360.3,620.9c15.4,46,53.7,222.3,84.3,390.9l55.6,306.6L6078.7,3506c-348.8,350.7-567.2,555.7-617.1,578.7c-126.5,59.4-312.4,49.8-596-32.6c-36.4-9.6-46,5.8-93.9,139.9C4562.9,4788,3934.3,5134.8,3334.5,4985.3z M3786.8,4676.8c333.4-63.2,597.9-312.3,697.5-661.1c28.7-95.8,28.7-116.9,7.7-128.4c-565.3-325.8-1036.7-676.4-1571.3-1168.9c-101.6-92-189.7-168.6-197.4-168.6c-19.2,0-13.4,1222.6,7.7,1370.1c28.7,197.4,124.6,381.3,274,521.2C3231.1,4651.9,3493.6,4732.4,3786.8,4676.8z M5356.2,3758.9c70.9-132.2-95.8-569.1-392.8-1036.7l-115-180.1l-5.7,573c-1.9,314.3,0,574.9,3.8,578.7c3.8,3.8,67.1,28.7,138,53.7C5153.1,3806.8,5327.5,3812.6,5356.2,3758.9z M4442.1,2015.1C4035.9,1511.1,3290.5,781,2734.8,346C2259.5-23.8,1707.6-336.2,1416.3-395.6c-149.5-30.6-159-30.6-208.9,1.9c-51.7,34.5-51.7,40.3-42.2,155.2c34.5,362.2,452.2,1057.8,1080.8,1793.6c243.4,285.5,873.8,916,1165.1,1165.1c287.4,247.2,674.5,540.4,912.2,687.9l180.1,115l5.7-709l3.8-710.9L4442.1,2015.1z M4838.8,1045.5V116.1h-162.9H4513v737.8v737.8l157.1,191.6c88.1,105.4,161,191.6,162.9,191.6C4836.9,1974.9,4838.8,1557.1,4838.8,1045.5z M4275.4,392c-214.6-316.2,11.5-755,387.1-755c162.9,0,251,34.5,358.4,143.7c174.4,172.5,195.5,427.3,51.7,619l-46,65.2l111.1,115l113.1,113l70.9-78.6c116.9-130.3,157.1-262.5,157.1-498.2c0-262.5-42.2-373.7-203.1-548.1c-254.9-272.1-619-343-952.4-185.9C4198.8-558.4,4018.7-386,3959.2-271c-145.6,283.6-116.9,632.4,69,875.7l69,90.1l113.1-115l115-115L4275.4,392z"/><path d="M6870.1,2507.6c-61.3-394.7-228-735.9-573-1172.8c-65.2-80.5-126.5-168.6-136.1-195.5c-47.9-120.7-32.6-139.9,902.6-1071.2l881.5-881.5l115,124.6c141.8,155.2,327.7,413.9,435,609.4c120.7,222.3,153.3,348.8,166.7,691.8l13.4,295.1l-877.7,877.7c-484.8,484.8-885.3,879.6-891.1,879.6C6898.8,2664.7,6883.5,2593.8,6870.1,2507.6z"/><path d="M657.5-1623.9c-218.5-220.4-274-287.5-325.8-398.6c-57.5-120.7-63.2-147.5-63.2-314.2c0-162.9,5.7-195.5,59.4-306.6c170.5-360.3,563.4-519.3,937.1-381.3c438.8,162.9,609.4,724.3,339.2,1113.4c-32.6,46-164.8,187.8-295.1,318.1C981.4-1273.2,1008.2-1271.3,657.5-1623.9z"/><path d="M3047.1-1752.3c-212.7-101.6-369.8-147.6-536.6-157.1c-84.3-3.8-174.4-11.5-199.3-17.3c-42.2-9.6,57.5-115,900.7-958.1c519.3-521.2,954.3-946.7,963.9-946.7c72.8,0,873.8,350.7,873.8,383.3c0,5.7-394.8,404.3-877.7,887.2C3181.2-1572.2,3279-1641.1,3047.1-1752.3z"/></g></g>
</svg>' />
</div>
<input type="color" />
</div>