A little answer is not on the question, but more general about svg in general.
For some reason, developers disdain to draw and touch it in general (as if they are afraid to see jpg in a notebook). And this applies even to very large companies.
Take a look at the RBC logo ( link )
How it looks from them and how it can be done:
<?xml version="1.0" encoding="UTF-8"?> <svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch --> <title>Group 3</title> <desc>Created with Sketch.</desc> <defs></defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="logo_mob_outline" transform="translate(-25.000000, -140.000000)"> <g id="Group-3" transform="translate(25.000000, 140.000000)"> <polygon id="Fill-1" fill="#92CFAE" points="0 0.0390594602 0 19.3656226 19.3265632 0.0390594602"></polygon> <polygon id="Fill-2" fill="#2A8288" points="1.69531256 21.0609352 21.0218757 21.0609352 21.0218757 1.73437202"></polygon> </g> </g> </g> </svg> <svg width="22px" height="22px" viewBox="0 0 22 22"> <polygon points="0 19 19 0 0 0" fill="#92CFAE"></polygon> <polygon points="1 21 21 1 21 21" fill="#2A8288"></polygon> </svg>
I did, maybe I missed a little, but the point is that outside it is square, and the points not from the whole number create unpleasant irregularities on the idea of even edges. For example, in the Yandex logo, too, there are extra groups with extra attributes, with a bunch of digits after the dot (and in fact more than 1 nobody will ever notice the difference)
Well, back to our star-checkbox. There is nothing difficult to draw it yourself; it is no more difficult than drawing it in a notebook in a cage:
<svg width="200" height="200" viewBox="0 0 200 200"> <polygon points=" 0 75, 75 75, 100 0, 125 75, 200 75, 140 120, 166 200, 100 150, 34 200, 60 120" fill="#FF6633"/> </svg>
To make it easier, you can move each point to the next line. I drew the usual Soviet star in the editor, as they drew her at school, in one line. Trimmed and got points. By the way, theoretically for smooth lines it is more correct to use a
polygon , as the
path implies the possible presence of bezier curves.
The animation from the answer is very clumsy, without a soul and in the middle of the animation a strong porridge. I open the editor, superimpose one shape on another and see how you can animate less rudely: 
<svg width="200" height="200" viewBox="0 0 200 200"> <polygon points="0 75 75 75 100 0 125 75 200 75 140 120 166 200 100 150 34 200 60 120" fill="#FF6633"> <animate begin="click" fill="freeze" attributeName="points" dur="1s" to="35 82 67 120 167 36 193 67 193 67 193 67 114.5 131.5 62 175 62 175 5 108"/> </polygon> </svg>
var button = document.getElementById("button"), buttonText = document.getElementById("btnText"), animationToStar = document.getElementById("toStar"), animationToCheck = document.getElementById("toCheck"); button.addEventListener('click', function() { if (button.classList.contains("keep")) { button.classList.remove("keep"); animationToStar.beginElement(); buttonText.innerHTML = "Сохранить"; } else { buttonText.innerHTML = "Сохранено!"; button.classList.add("keep"); animationToCheck.beginElement(); } }, false);
button { border: 0; background: linear-gradient( to bottom, #444, #111); border-radius: 20px; padding: 10px 30px 12px; width: 235px; outline: 0; display: inline-block; text-align: left; } button:hover, button:active { background: black; } button svg { width: 40px; height: 40px; display: inline-block; vertical-align: middle; margin-right: 10px; } button span { font-size: 22px; position: relative; top: 4px; color: white; } body { padding: 20px; text-align: center; }
<button id="button"> <svg viewBox="0 0 200 200"> <polygon points="0 75 75 75 100 0 125 75 200 75 140 120 166 200 100 150 34 200 60 120" fill="#FF6633"> <animate id="toCheck" fill="freeze" attributeName="points" dur="500ms" begin="indefinite" d="toCheck" to="35 82 67 120 167 36 193 67 193 67 193 67 114.5 131.5 62 175 62 175 5 108" /> <animate id="toStar" fill="freeze" attributeName="points" dur="500ms" begin="indefinite" d="toStar" to="0 75 75 75 100 0 125 75 200 75 140 120 166 200 100 150 34 200 60 120" /> <animate fill="freeze" dur="500ms" to="#EEDD00" attributeName="fill" begin="toCheck.begin"/> <animate fill="freeze" dur="500ms" to="#FF6633" attributeName="fill" begin="toStar.begin"/> </polygon> </svg> <span id="btnText">Сохранить</span> </button>
We insert in an example from the answer, we look that it is possible to improve on svg. In principle, everything is in order, only the color animation can be run at the start of the shape animation directly into svg, this throws out a bit of js.
