TAG
CSS
JavaScript
Result
Run
License
<div class="svg-container"> <svg viewBox="0 0 171.8 259.2"> <style type="text/css"> .st0{fill:#FFFFFF;stroke:#231F20;stroke-width:2;} .st1{fill:#FFFFFF;} .st2{fill:#231F20;} </style> <path class="st0" d="M69.1,29.8c0-5.9,0.8-10.8,1.3-16.6c0.2-1.6,1.3-13.8,3.4-12c1.9,1.5,2.8,4.6,3.9,6.8c2.1,4.1,4.2,8.2,6.1,12.3 c0.5,1,2.9,7.5,4.1,7.4C88.1,27.7,69.1,29.8,69.1,29.8z"/> <path class="st0 tail-custom" d="M155.3,178.7c2.5-6,2.2-11.6,1.8-18c-0.1-1.3,0-2.8,1-3.6c0.7-0.5,1.8-0.4,2.6,0c6.5,3.3,10.8,11.3,10.1,18.5 c-1.2,11.8-14.4,19.4-24,24.1C148.1,192.1,152.3,185.7,155.3,178.7z"/> <path class="st0" d="M138.2,46.2c0,0-21.3,9-34.7-1.6c0,0-2.2,18.8,31.4,21.5C168.5,68.9,138.2,46.2,138.2,46.2z"/> <g> <path class="st1" d="M48.3,258.2c-4.2,0-4.9-2.2-5-3.6c-0.1-2.7,1.8-5.2,4.6-6.1c0.3-0.1,0.4-1.2,0.4-1.7c0-0.3,0-0.6,0.1-0.8 c0.1-1,0.3-2,0.4-3c0.1-0.8,0.2-1.6,0.3-2.5c0.4-3.4,0.8-7,0.9-10.6c0-2.2-0.4-5.2-2.3-7.4c-1.8-2-4.3-3-7.4-3 c-3.2,0-6.9,1.1-10,2.9c-2.2,1.3-6,3.9-7.2,7.7c-0.5,1.6-1,3.3-1.5,4.9c-1.6,5.1-3.2,10.5-5.1,15.6c-0.1,0.3-0.2,0.6-0.3,0.9 c-0.6,1.7-1.2,3.5-2.6,5c-1.2,1.2-3.7,1.3-6,1.3l-1.3,0c-4.1,0-5.1-1.8-5.2-3.3c-0.1-2.5,1.5-4.9,4-5.9c0-0.8,0-1.5,0-2.1 c0-0.6,0-1.2,0-1.6c-0.3-7.9,0.2-15.8,0.6-22.6c1.5-22.3,4.9-45.2,10.1-68.1c4.3-19,10.3-37.7,15.1-51.8c1.4-4.3,3-8.6,4.5-12.8 C39.6,78,44,65.9,46,53.5c1.3-8,0.1-15.4-3.9-24c-1-2.1-2-4.2-3-6.4c-1.8-3.8-3.6-7.7-5.4-11.5c-0.8-1.6-0.9-2.5-0.5-3.2 c0.3-0.4,0.7-0.7,1.2-0.7c0.2,0,0.5,0,0.7,0.1c1.3,0.4,3.3,1.9,4.9,3.2l0.1,0.1c2.2,1.7,4.5,3.5,6.8,5.5c3.1,2.7,6.3,5.2,9.9,6.9 c0.1,0.1,0.3,0.1,0.4,0.2c2.8,1.3,5.8,1.4,8.6,1.4c0.8,0,1.6,0,2.4,0c0.8,0,1.6,0,2.4,0h0.3c4.6,0,9.6-0.2,15.4-0.7 c4.8-0.4,9.6-0.9,14.3-1.4c5.5-0.6,11.2-1.2,16.8-1.6l0.6,0l0.3,0.6c3.6,6.6,11,11.5,20.3,13.5c0.4,0.1,0.7,0.3,0.8,0.7 c1,2.4-6.4,19-6.8,19.7c-3.3,5.7-7.8,10.8-12.9,14.7c-5.1,3.8-11,5.6-16.7,7.2c-4.1,1.2-8.3,2.4-12.1,4.4 c-8.5,4.5-14.6,16.6-16.7,25.9c-2.3,10.6,0.1,23.2,6.4,33.8c8.6,14.5,25.9,19.6,41.4,23.3c1.2,0.3,2.4,0.6,3.6,0.8 c9.8,2.3,19.9,4.6,27.8,11.3c7.3,6.1,12.3,15.5,13.8,25.7c1.2,8.2-0.6,16-2.4,23.6c-0.5,2-0.9,4.1-1.4,6.1 c-0.8,3.9-1.6,7.8-2.9,11.5c-1.5,4.3-3.1,7.5-8.6,7.8c-0.3,0-0.6,0-1,0.1c-0.7,0-1.4,0.1-2.1,0.1c-1,0-4.2,0-4.3-3.2 c-0.1-2.6,2.2-4.8,4.8-5.9c-0.2-1-0.5-2.6-1-5.1c-0.1-0.4-0.1-0.6-0.1-0.7c-0.6-3-2.6-6.8-5.1-9.4c-0.9-1-2-1.9-3.6-3 c-0.1-0.1-0.7-0.4-1.1-0.6c-0.5-0.2-0.9-0.5-1.2-0.7c0.1,0.9,0.1,1.9,0.2,2.8c0.2,2.4,0.5,4.8,0.2,7.4c-0.6,4.9-3.4,12.7-8.8,14.1 c-0.8,0.2-2.3,0.4-3.8,0.4c-4.9,0-5.7-2.2-5.8-3.5c-0.1-1.6,0.5-3.2,1.8-4.4c1.2-1.2,2.8-1.9,4.6-2c0,0,0,0,0.1,0 c1.8-6.5-0.5-14.1-2.9-19.6c-1.3-0.2-2.7-0.4-4-0.5c-1.6-0.1-3.3-0.2-4.9-0.3c-3.2-0.2-6.1-0.3-8.9-0.3c-24.5,0-38.5,7.6-42.5,23.3 c-0.3,1-0.5,2-0.7,2.9c-0.7,3.1-1.4,6.3-3.1,9.2c-2.2,3.7-5.7,4.6-8.7,5C49.4,258.2,48.8,258.2,48.3,258.2z"/> <path class="st2" d="M34.5,8.8c0.1,0,0.3,0,0.4,0.1c1.4,0.4,4,2.5,4.7,3.1c2.3,1.8,4.5,3.6,6.7,5.4c3.2,2.7,6.4,5.3,10.1,7.1 c0.2,0.1,0.3,0.1,0.5,0.2c2.8,1.3,5.9,1.5,9,1.5c1.6,0,3.2-0.1,4.8-0.1c0,0,0.1,0,0.1,0c0.1,0,0.2,0,0.2,0c5.2,0,10.3-0.3,15.5-0.7 c10.4-0.8,20.7-2.2,31.1-2.9c4.2,7.7,12.7,12.2,20.9,14c1.5,0.3-5.8,17.4-6.6,18.9c-3.2,5.6-7.5,10.5-12.6,14.4 c-8.6,6.5-19.5,6.7-28.6,11.5c-8.9,4.7-15.1,17.2-17.2,26.6c-2.5,11.6,0.5,24.4,6.5,34.5c8.8,14.8,26.2,20,42,23.8 c10.7,2.6,22.3,4.6,31,11.9c7.5,6.3,12.1,15.5,13.5,25.1c1.5,10.1-1.7,19.6-3.7,29.4c-0.8,3.8-1.6,7.7-2.9,11.4 c-1.5,4.2-2.9,6.9-7.7,7.2c-1,0.1-2.1,0.1-3,0.1c-1.8,0-3.2-0.4-3.3-2.3c-0.1-2.4,2.6-4.5,5-5.2c0,0,0,0,0,0 c-0.3,0-1.3-6.1-1.4-6.7c-0.7-3.4-2.9-7.3-5.3-9.9c-1.1-1.2-2.4-2.2-3.7-3.1c-0.5-0.3-3.9-1.9-4-2.3c0,4,0.9,7.9,0.5,12 c-0.5,4.4-3.1,12-8,13.2c-0.8,0.2-2.2,0.4-3.6,0.4c-2.3,0-4.7-0.5-4.8-2.6c-0.1-2.8,2.3-5.2,5.4-5.4c0.1,0,0.1,0,0.2,0 c0.2,0,0.4,0,0.6,0c2.3-7.2-0.4-15.8-3-21.5c-1.6-0.2-3.1-0.4-4.6-0.5c-1.6-0.1-3.3-0.2-5-0.3c-2.9-0.2-5.9-0.3-9-0.3 c-18.2,0-38.3,4-43.5,24.1c-1,4-1.6,8.2-3.7,11.9c-1.8,3.1-4.6,4.1-8,4.5c-0.5,0.1-1.1,0.1-1.7,0.1c-1.9,0-3.9-0.5-4-2.6 c-0.1-2.3,1.6-4.4,3.9-5.1c1.2-0.4,1-2.3,1.1-3.3c0.2-1.8,0.5-3.6,0.7-5.4c0.5-3.6,0.9-7.1,0.9-10.7c0-2.9-0.6-5.9-2.6-8.1 c-2.1-2.4-5.1-3.3-8.2-3.3c-3.7,0-7.6,1.3-10.5,3c-3.2,1.8-6.5,4.7-7.6,8.3c-2.1,6.9-4.1,13.8-6.6,20.5c-0.7,1.9-1.3,4-2.7,5.5 c-0.9,1-3.5,1-5.2,1c-0.3,0-0.5,0-0.7,0c-0.1,0-0.2,0-0.3,0c-0.1,0-0.1,0-0.2,0c-1.7,0-4.1-0.3-4.2-2.4c-0.1-2.4,1.6-4.4,4-5.1 c-0.1-1.7,0-3.4,0-4.5c-0.3-7.5,0.1-15,0.6-22.5c1.6-22.8,5-45.6,10.1-67.9c4-17.5,9.3-34.7,15-51.7C37.2,86.7,44.2,70.6,47,53.7 c1.5-8.8-0.2-16.6-4-24.6c-2.8-6-5.6-12-8.4-17.9C33.7,9.4,33.9,8.8,34.5,8.8 M34.5,6.8L34.5,6.8c-0.9,0-1.6,0.4-2.1,1.1 c-0.8,1.3-0.2,2.8,0.4,4.1c1.8,3.8,3.7,7.8,5.4,11.5c1,2.1,2,4.2,3,6.4c3.9,8.4,5.1,15.6,3.8,23.4c-2.1,12.3-6.4,24.4-10.7,36 c-1.5,4.2-3.1,8.6-4.5,12.8c-4.8,14.2-10.8,32.8-15.1,51.9C9.6,177,6.1,200,4.6,222.3C4.1,229.1,3.7,237.1,4,245c0,0.4,0,1,0,1.6 c0,0.5,0,1,0,1.5c-2.5,1.3-4.1,3.8-4,6.6c0.1,1.6,1,4.3,6.2,4.3l0.2,0l0.3,0l0.3,0l0.4,0c2.5,0,5.2-0.1,6.7-1.6 c1.5-1.6,2.2-3.6,2.8-5.3c0.1-0.3,0.2-0.6,0.3-0.9c1.9-5.2,3.5-10.5,5.1-15.7c0.5-1.6,1-3.3,1.5-4.9c0.8-2.5,3.2-5.1,6.7-7.2 c2.9-1.7,6.5-2.7,9.5-2.7c2.9,0,5.1,0.9,6.7,2.6c1.7,2,2.1,4.7,2.1,6.7c0,3.5-0.4,7.1-0.8,10.5c-0.1,0.8-0.2,1.6-0.3,2.5 c-0.1,1-0.3,2-0.4,3c0,0.3,0,0.6-0.1,0.9c0,0.2,0,0.6-0.1,0.9c-3.1,1.1-5.1,3.9-4.9,7c0.1,1.4,0.8,4.5,6,4.5c0.6,0,1.2,0,1.9-0.1 c3.1-0.4,7.1-1.3,9.5-5.4c1.8-3,2.5-6.3,3.2-9.5c0.2-1,0.4-2,0.7-2.9c3.9-15.2,17.5-22.6,41.6-22.6c2.8,0,5.7,0.1,8.9,0.3 c1.5,0.1,3.1,0.2,4.9,0.3c1.1,0.1,2.3,0.2,3.4,0.4c2.2,5.1,4.1,11.9,2.8,17.8c-3.9,0.5-6.8,3.7-6.6,7.4c0.1,1.3,0.9,4.5,6.8,4.5 c1.7,0,3.2-0.2,4.1-0.5c5.9-1.5,8.9-9.7,9.5-14.9c0.3-2.7,0.1-5.2-0.2-7.6c0-0.3-0.1-0.6-0.1-0.9c0.3,0.2,0.6,0.3,0.7,0.4 c1.5,1,2.6,1.9,3.4,2.8c2.3,2.4,4.3,6.1,4.8,9c0,0.1,0.1,0.3,0.1,0.7c0.2,0.9,0.4,2.4,0.7,3.7c0,0.2,0.1,0.5,0.1,0.7 c-2.6,1.3-4.8,3.7-4.6,6.5c0.1,1.9,1.1,4.2,5.3,4.2c0.7,0,1.4,0,2.1-0.1c0.3,0,0.6,0,0.9-0.1c6.1-0.3,7.9-4,9.5-8.5 c1.4-3.8,2.2-7.8,3-11.6c0.4-2.1,0.9-4.1,1.4-6.1c1.8-7.7,3.6-15.6,2.4-24c-1.5-10.4-6.7-20-14.2-26.3c-8.1-6.8-18.3-9.2-28.2-11.5 c-1.2-0.3-2.4-0.5-3.6-0.8c-15.3-3.6-32.3-8.7-40.7-22.9c-6.2-10.4-8.5-22.8-6.2-33.1c2.1-9.4,8.3-21.1,16.2-25.2 c3.7-1.9,7.7-3.1,11.9-4.3c5.8-1.7,11.8-3.4,17-7.4c5.2-3.9,9.7-9.1,13.1-15c0.5-0.9,2.4-5.3,4.1-9.6c3.6-9.2,3.1-10.2,2.8-11 c-0.3-0.7-0.9-1.1-1.5-1.3c-9-1.9-16.2-6.7-19.6-13l-0.6-1.1l-1.3,0.1c-5.6,0.4-11.3,1-16.9,1.6c-4.7,0.5-9.5,1-14.3,1.4 c-5.7,0.5-10.8,0.7-15.3,0.7l-0.2,0l-0.1,0c-0.8,0-1.6,0-2.4,0c-0.8,0-1.6,0-2.4,0c-2.7,0-5.6-0.2-8.2-1.3 c-0.1-0.1-0.3-0.1-0.4-0.2c-3.5-1.7-6.6-4.2-9.7-6.8c-2.3-1.9-4.6-3.8-6.8-5.5l-0.1-0.1C39,8.9,37,7.4,35.5,6.9 C35.1,6.8,34.8,6.8,34.5,6.8L34.5,6.8z"/> </g> <path class="st0" d="M84.3,45.7c-1,3.5-4.3,5.6-7.4,4.7C73.7,49.5,72,46,73,42.5c1-3.5,4.3-5.6,7.4-4.7 C83.6,38.7,85.3,42.2,84.3,45.7z"/> <ellipse transform="matrix(0.2754 -0.9613 0.9613 0.2754 15.6384 108.0925)" class="st0" cx="79.5" cy="43.7" rx="5.2" ry="4.6"/> </svg> <button type="button" id="btn-transform">Transform</button> </div>
.svg-container { width: 50vmin; } /* custom css to path node */ .tail-custom { stroke: #FF0000 !important; }
window.addEventListener("load", () => { const elBtnTransform = document.getElementById("btn-transform"); const elTailPath = document.querySelector(".tail-custom"); elBtnTransform.onclick = e => { elTailPath.setAttribute("transform-origin", "155 168"); elTailPath.setAttribute("transform", "rotate(45)"); }; });
Console
expand_less
License
License
by DevDic
Close