<div class="menu cross menu--1"> <label> <input type="checkbox"> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="30" /> <path class="line--1" d="M0 40h62c13 0 6 28-4 18L35 35" /> <path class="line--2" d="M0 50h70" /> <path class="line--3" d="M0 60h62c13 0 6-28-4-18L35 65" /> </svg> </label> </div>
![SVGだから快適!スマホアプリやWebサイトでよく見かけるアイコンをアニメーションで変形させるテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/11d59effc1f2b0fe4dc50fe843ddf5b322203335/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018081901.gif)