JSFiddle - React, Tailwind, and code Playground

by satheeshkumar manoharan

HTML

<div id="closeit"></div>

CSS

*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.Closeit{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);margin:40px auto;position:relative;display:block;width:68px;height:68px;background:#000;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.path-close{position:absolute;top:0;left:0;height:68px;width:68px;mask:url(#mask);-webkit-mask-box-image:url(mask.svg)}.animate-path{position:absolute;top:0;left:0;width:68px;height:68px}.path-rotation{height:34px;width:34px;margin:34px 34px 0 0;-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}.path-rotation:before{content:'';display:block;width:30px;height:34px;margin:0 4px 0 0}@-webkit-keyframes rotate-out{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}40%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate-out{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}40%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes rotate-in{0%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}40%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes rotate-in{0%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}40%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.Closeit.is-open .path{-webkit-animation:dash-in .6s linear normal;animation:dash-in .6s linear normal;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.Closeit.is-open .animate-path{-webkit-animation:rotate-in .6s linear normal;animation:rotate-in .6s linear...

JavaScript

jQuery.fn.closeit=function(options){var trigger = $(this), isClosed = true;	trigger.addClass('Closeit is-closed'); if(!options || !options.color){ color='fff'; }else{ var color = options.color;};trigger.append('<div class="close-icon"><div class="close-container"><span class="close-bun-top"></span><span class="close-filling"></span><span class="close-bun-bot"></span></div></div><div class="close-ring"><svg class="svg-ring"><path class="path" fill="none" stroke="'+color+'" stroke-miterlimit="10" stroke-width="4" d="M 34 2 C 16.3 2 2 16.3 2 34 s 14.3 32 32 32 s 32 -14.3 32 -32 S 51.7 2 34 2" /></svg></div><svg width="0" height="0"><mask id="mask"><path xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#ff0000" stroke-miterlimit="10" stroke-width="4" d="M 34 2 c 11.6 0 21.8 6.2 27.4 15.5 c 2.9 4.8 5 16.5 -9.4 16.5 h -4" /></mask></svg><div class="path-close"><div class="animate-path"><div class="path-rotation"></div></div></div>');trigger.find('.close-bun-top, .close-bun-bot, .close-filling').css('background',color);trigger.append('<style> #'+trigger.attr("id")+' .path-rotation:before{background:'+color+' !important;}</style>');trigger.click(function (){ closeTime(); });function closeTime() { if (isClosed == true) { trigger.removeClass('is-open'); trigger.addClass('is-closed'); isClosed = false;}else{ trigger.removeClass('is-closed'); trigger.addClass('is-open');isClosed = true;}}};
$(document).ready(function(e) {
        $('#closeit').closeit({color:"red"});
    });