HTML CSS examples for SVG:polygon
Adding fill to an svg to create cloud shape
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <!--from w w w . j a v a 2s .com--> <body> <svg x="0" y="0" width="512" height="512" viewbox="0 0 512 512" version="1.1" baseprofile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"> <path fill="#1D1D1B" d="M400,160c-5.312,0-10.562,0.375-15.792,1.125C354.334,120.417,307,96,256,96c-51.188,0-98.312,24.417-128.208,65.125c-5.23-0.75-10.48-1.125-15.792-1.125C50.25,160,0,210.25,0,272s50.25,112,112,112c13.688,0,27.084-2.5,39.709-7.333C180.666,401.917,217.5,416,256,416c38.542,0,75.333-14.083,104.291-39.333C372.916,381.5,386.312,384,400,384c61.75,0,112-50.25,112-112S461.75,160,400,160z M400,352c-17.125,0-32.916-5.5-45.938-14.667C330.584,365.624,295.624,384,256,384c-39.625,0-74.584-18.376-98.062-46.667C144.938,346.5,129.125,352,112,352c-44.188,0-80-35.812-80-80c0-44.188,35.812-80,80-80c10.812,0,21.062,2.208,30.438,6.083C163.667,156.667,206.291,128,256,128s92.334,28.667,113.541,70.083C378.938,194.208,389.209,192,400,192c44.188,0,80,35.812,80,80C480,316.188,444.188,352,400,352z" /> <path fill="Pink" d="M400,352c-17.125,0-32.916-5.5-45.938-14.667C330.584,365.624,295.624,384,256,384c-39.625,0-74.584-18.376-98.062-46.667C144.938,346.5,129.125,352,112,352c-44.188,0-80-35.812-80-80c0-44.188,35.812-80,80-80c10.812,0,21.062,2.208,30.438,6.083C163.667,156.667,206.291,128,256,128s92.334,28.667,113.541,70.083C378.938,194.208,389.209,192,400,192c44.188,0,80,35.812,80,80C480,316.188,444.188,352,400,352z" /> </svg> </body> </html>