HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<div class="container">
<!-- Top Navigation -->
<header>
<h1>Testing Animated Checkboxes and Radio Buttons with SVG</h1>
<p>Please note that the animated SVG might not work in all (mobile) browsers.</p>
</header>
<section>
<form class="ac-custom ac-checkbox ac-cross" autocomplete="off">
<h2>How do you collaboratively administrate empowered markets via plug-and-play networks?</h2>
<ul>
<li><input id="cb1" name="cb1" type="checkbox"><label for="cb1">Efficiently unleash information</label></li>
<li><input id="cb2" name="cb2" type="checkbox"><label for="cb2">Quickly maximize timely deliverables</label></li>
<li><input id="cb3" name="cb3" type="checkbox"><label for="cb3">Dramatically maintain solutions</label></li>
<li><input id="cb4" name="cb4" type="checkbox"><label for="cb4">Completely synergize relationships</label></li>
<li><input id="cb5" name="cb5" type="checkbox"><label for="cb5">Professionally cultivate customer service</label></li>
</ul>
</form>
</section>
<section>
<form class="ac-custom ac-radio ac-fill" autocomplete="off">
<h2>Where do you proactively envision multimedia based expertise and cross-media growth strategies?</h2>
<ul>
<li><input id="r1" name="r1" type="radio"><label for="r1">Seamlessly visualize quality intellectual capital</label></li>
<li><input id="r2" name="r1" type="radio"><label for="r2">Collaboratively administrate turnkey channels</label></li>
<li><input id="r3" name="r1" type="radio"><label for="r3">Objectively seize scalable metrics</label></li>
<li><input id="r4" name="r1" type="radio"><label for="r4">Energistically scale future-proof core competencies</label></li>
</ul>
</form>
</section>
<section>
<form class="ac-custom ac-checkbox ac-checkmark" autocomplete="off">
<h2>Why do you interactively procrastinate high-payoff content without backward-compatible data?</h2>
<ul>
<li><input id="cb6" name="cb6" type="checkbox"><label for="cb6">Credibly reintermediate backend ideas</label></li>
<li><input id="cb7" name="cb7" type="checkbox"><label for="cb7">Continually reintermediate integrated processes</label></li>
<li><input id="cb8" name="cb8" type="checkbox"><label for="cb8">Distinctively exploit optimal alignments</label></li>
<li><input id="cb9" name="cb9" type="checkbox"><label for="cb9">Quickly coordinate e-business applications</label></li>
<ul>
</form>
</section>
<section>
<form class="ac-custom ac-radio ac-circle" autocomplete="off">
<h2>How would you dynamically target high-payoff intellectual capital for customized technologies?</h2>
<ul>
<li><input id="r5" name="r2" type="radio"><label for="r5">Objectively integrate emerging core competencies</label></li>
<li><input id="r6" name="r2" type="radio"><label for="r6">Progressively maintain extensive infomediaries</label></li>
<li><input id="r7" name="r2" type="radio"><label for="r7">Proactively fabricate one-to-one materials</label></li>
<li><input id="r8" name="r2" type="radio"><label for="r8">Quickly aggregate B2B users</label></li>
</ul>
</form>
</section>
<section>
<form class="ac-custom ac-checkbox ac-boxfill" autocomplete="off">
<h2>How can you appropriately empower dynamic leadership skills after business portals?</h2>
<ul>
<li><input id="cb10" name="cb10" type="checkbox"><label for="cb10">Professionally fashion wireless leadership</label></li>
<li><input id="cb11" name="cb11" type="checkbox"><label for="cb11">Dynamically reinvent market-driven opportunities</label></li>
<li><input id="cb12" name="cb12" type="checkbox"><label for="cb12">Compellingly embrace empowered e-business</label></li>
<li><input id="cb13" name="cb13" type="checkbox"><label for="cb13">Synergistically deliver performance based methods</label></li>
</ul>
</form>
</section>
<section>
<form class="ac-custom ac-radio ac-swirl" autocomplete="off">
<h2>How do you interactively productize premium technologies whereas interdependent quality vectors?</h2>
<ul>
<li><input id="r9" name="r3" type="radio"><label for="r9">Uniquely matrix economically sound value</label></li>
<li><input id="r10" name="r3" type="radio"><label for="r10">Competently parallel task fully researched data</label></li>
<li><input id="r11" name="r3" type="radio"><label for="r11">Collaboratively expedite quality manufactured products</label></li>
<li><input id="r12" name="r3" type="radio"><label for="r12">Quickly communicate enabled technology and leadership skills</label></li>
</ul>
</form>
</section>
<section>
<form class="ac-custom ac-checkbox ac-diagonal" autocomplete="off">
<h2>Do you rapaciously seize adaptive infomediaries and user-centric intellectual capital and how?</h2>
<ul>
<li><input id="cb14" name="cb14" type="checkbox"><label for="cb14">Collaboratively unleash market-driven "outside the box" thinking</label></li>
<li><input id="cb15" name="cb15" type="checkbox"><label for="cb15">Enthusiastically engage process improvements</label></li>
<li><input id="cb16" name="cb16" type="checkbox"><label for="cb16">Efficiently myocardinate market-driven innovation</label></li>
<li><input id="cb17" name="cb17" type="checkbox"><label for="cb17">Phosfluorescently expedite impactful supply chains</label></li>
</ul>
</form>
</section>
<section>
<form class="ac-custom ac-list" autocomplete="off">
<h2>Your to do list to uniquely deploy cross-unit benefits with wireless testing procedures:</h2>
<ol>
<li><input id="cb18" name="cb18" type="checkbox"><label for="cb18"><span>Quickly incentivize impactful actions</span></label></li>
<li><input id="cb19" name="cb19" type="checkbox"><label for="cb19"><span>Monotonically engage market-driven capital</span></label></li>
<li><input id="cb20" name="cb20" type="checkbox"><label for="cb20"><span>Globally harness multimedia collaboration</span></label></li>
<li><input id="cb21" name="cb21" type="checkbox"><label for="cb21"><span>Professionally cultivate customer service</span></label></li>
<ol>
</form>
</section>
</div><!-- /container -->
*,
*:after,
*::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ac-custom {
padding: 0 3em;
max-width: 900px;
margin: 0 auto;
}
.ac-custom h2 {
font-size: 3em;
font-weight: 300;
padding: 0 0 0.5em;
margin: 0 0 30px;
}
.ac-custom ul,
.ac-custom ol {
list-style: none;
padding: 0;
margin: 0 auto;
max-width: 800px;
}
.ac-custom li {
margin: 0 auto;
padding: 2em 0;
position: relative;
}
.ac-custom label {
display: inline-block;
position: relative;
font-size: 2em;
padding: 0 0 0 80px;
vertical-align: top;
color: rgba(0,0,0,0.2);
cursor: pointer;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"],
.ac-custom label::before {
width: 50px;
height: 50px;
top: 50%;
left: 0;
margin-top: -25px;
position: absolute;
cursor: pointer;
}
.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"] {
opacity: 0;
-webkit-appearance: none;
display: inline-block;
vertical-align: middle;
z-index: 100;
}
.ac-custom label::before {
content: '';
border: 4px solid #fff;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.ac-radio label::before {
border-radius: 50%;
}
.ac-custom input[type="checkbox"]:checked + label,
.ac-custom input[type="radio"]:checked + label {
color: #fff;
}
.ac-custom input[type="checkbox"]:checked + label::before,
.ac-custom input[type="radio"]:checked + label::before {
opacity: 0.8;
}
/* General SVG and path styles */
.ac-custom svg {
position: absolute;
width: 40px;
height: 40px;
top: 50%;
margin-top: -20px;
left: 5px;
pointer-events: none;
}
.ac-custom svg path {
stroke: #fdfcd3;
stroke-width: 13px;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
/* Specific input, SVG and path styles */
/* Circle */
.ac-circle input[type="checkbox"],
.ac-circle input[type="radio"],
.ac-circle label::before {
width: 30px;
height: 30px;
margin-top: -15px;
left: 10px;
position: absolute;
}
.ac-circle label::before {
background-color: #fff;
border: none;
}
.ac-circle svg {
width: 70px;
height: 70px;
margin-top: -35px;
left: -10px;
}
.ac-circle svg path {
stroke-width: 5px;
}
/* Box Fill */
.ac-boxfill svg path {
stroke-width: 8px;
}
/* Swirl */
.ac-swirl svg path {
stroke-width: 8px;
}
/* List */
.ac-list ol {
list-style: decimal;
list-style-position: inside;
}
.ac-list ol li {
font-size: 2em;
padding: 1em 1em 0 2em;
text-indent: -40px;
}
.ac-list ol li label {
font-size: 1em;
text-indent: 0;
padding-left: 30px;
}
.ac-list label::before {
display: none;
}
.ac-list svg {
width: 100%;
height: 80px;
left: 0;
top: 1.2em;
margin-top: 0px;
}
.ac-list svg path {
stroke-width: 4px;
}
/* Media Queries */
@media screen and (max-width: 50em) {
section {
font-size: 80%;
}
}
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
body {
background: silver;
color: #fff;
font-family: 'Lato', Arial, sans-serif;
}
a {
color: #fff;
opacity: 0.7;
text-decoration: none;
}
a:hover, a:focus {
opacity: 1;
}
.container > header {
margin: 0 auto;
padding: 4em 2em;
text-align: center;
background: #2d2d2d;
}
.container > header h1 {
font-size: 2.625em;
line-height: 1.3;
margin: 0;
font-weight: 300;
}
.container > header span {
display: block;
font-size: 60%;
color: rgba(0,0,0,.2);
font-weight: 400;
padding: 0 0 0.6em 0.1em;
}
section {
padding: 7em 0;
}
section:nth-child(even) {
background: rgba(0,0,0,.05);
}
section.related {
text-align: center;
font-size: 1.6em;
}
.related p {
margin: 0;
padding: 1.1em;
}
/* To Navigation Style */
.codrops-top {
text-transform: uppercase;
width: 100%;
font-size: 0.69em;
line-height: 2.2;
font-weight: 700;
}
.codrops-top a {
text-decoration: none;
padding: 0 1em;
letter-spacing: 0.1em;
display: inline-block;
}
.codrops-top span.right {
float: right;
}
.codrops-top span.right a {
float: left;
display: block;
}
.codrops-icon:before {
font-family: 'codropsicons';
margin: 0 4px;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.codrops-icon-drop:before {
content: "\e001";
}
.codrops-icon-prev:before {
content: "\e004";
}
@media screen and (max-width: 25em) {
.codrops-icon span {
display: none;
}
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
if( document.createElement('svg').getAttributeNS ) {
var checkbxsCross = Array.prototype.slice.call( document.querySelectorAll( 'form.ac-cross input[type="checkbox"]' ) ),
radiobxsFill = Array.prototype.slice.call( document.querySelectorAll( 'form.ac-fill input[type="radio"]' ) ),
checkbxsCheckmark = Array.prototype.slice.call( document.querySelectorAll( 'form.ac-checkmark input[type="checkbox"]' ) ),
radiobxsCircle = Array.prototype.slice.call( document.querySelectorAll( 'form.ac-circle input[type="radio"]' ) ),
checkbxsBoxfill = Array.prototype.slice.call( document.querySelectorAll( 'form.ac-boxfill input[type="checkbox"]' ) ),
radiobxsSwirl = Array.prototype.slice.call( document.querySelectorAll( 'form.ac-swirl input[type="radio"]' ) ),
checkbxsDiagonal = Array.prototype.slice.call( document.querySelectorAll( 'form.ac-diagonal input[type="checkbox"]' ) ),
checkbxsList = Array.prototype.slice.call( document.querySelectorAll( 'form.ac-list input[type="checkbox"]' ) ),
pathDefs = {
cross : ['M 10 10 L 90 90','M 90 10 L 10 90'],
fill : ['M15.833,24.334c2.179-0.443,4.766-3.995,6.545-5.359 c1.76-1.35,4.144-3.732,6.256-4.339c-3.983,3.844-6.504,9.556-10.047,13.827c-2.325,2.802-5.387,6.153-6.068,9.866 c2.081-0.474,4.484-2.502,6.425-3.488c5.708-2.897,11.316-6.804,16.608-10.418c4.812-3.287,11.13-7.53,13.935-12.905 c-0.759,3.059-3.364,6.421-4.943,9.203c-2.728,4.806-6.064,8.417-9.781,12.446c-6.895,7.477-15.107,14.109-20.779,22.608 c3.515-0.784,7.103-2.996,10.263-4.628c6.455-3.335,12.235-8.381,17.684-13.15c5.495-4.81,10.848-9.68,15.866-14.988 c1.905-2.016,4.178-4.42,5.556-6.838c0.051,1.256-0.604,2.542-1.03,3.672c-1.424,3.767-3.011,7.432-4.723,11.076 c-2.772,5.904-6.312,11.342-9.921,16.763c-3.167,4.757-7.082,8.94-10.854,13.205c-2.456,2.777-4.876,5.977-7.627,8.448 c9.341-7.52,18.965-14.629,27.924-22.656c4.995-4.474,9.557-9.075,13.586-14.446c1.443-1.924,2.427-4.939,3.74-6.56 c-0.446,3.322-2.183,6.878-3.312,10.032c-2.261,6.309-5.352,12.53-8.418,18.482c-3.46,6.719-8.134,12.698-11.954,19.203 c-0.725,1.234-1.833,2.451-2.265,3.77c2.347-0.48,4.812-3.199,7.028-4.286c4.144-2.033,7.787-4.938,11.184-8.072 c3.142-2.9,5.344-6.758,7.925-10.141c1.483-1.944,3.306-4.056,4.341-6.283c0.041,1.102-0.507,2.345-0.876,3.388 c-1.456,4.114-3.369,8.184-5.059,12.212c-1.503,3.583-3.421,7.001-5.277,10.411c-0.967,1.775-2.471,3.528-3.287,5.298 c2.49-1.163,5.229-3.906,7.212-5.828c2.094-2.028,5.027-4.716,6.33-7.335c-0.256,1.47-2.07,3.577-3.02,4.809'],
checkmark : ['M16.667,62.167c3.109,5.55,7.217,10.591,10.926,15.75 c2.614,3.636,5.149,7.519,8.161,10.853c-0.046-0.051,1.959,2.414,2.692,2.343c0.895-0.088,6.958-8.511,6.014-7.3 c5.997-7.695,11.68-15.463,16.931-23.696c6.393-10.025,12.235-20.373,18.104-30.707C82.004,24.988,84.802,20.601,87,16'],
circle : ['M34.745,7.183C25.078,12.703,13.516,26.359,8.797,37.13 c-13.652,31.134,9.219,54.785,34.77,55.99c15.826,0.742,31.804-2.607,42.207-17.52c6.641-9.52,12.918-27.789,7.396-39.713 C85.873,20.155,69.828-5.347,41.802,13.379'],
boxfill : ['M6.987,4.774c15.308,2.213,30.731,1.398,46.101,1.398 c9.74,0,19.484,0.084,29.225,0.001c2.152-0.018,4.358-0.626,6.229,1.201c-5.443,1.284-10.857,2.58-16.398,2.524 c-9.586-0.096-18.983,2.331-28.597,2.326c-7.43-0.003-14.988-0.423-22.364,1.041c-4.099,0.811-7.216,3.958-10.759,6.81 c8.981-0.104,17.952,1.972,26.97,1.94c8.365-0.029,16.557-1.168,24.872-1.847c2.436-0.2,24.209-4.854,24.632,2.223 c-14.265,5.396-29.483,0.959-43.871,0.525c-12.163-0.368-24.866,2.739-36.677,6.863c14.93,4.236,30.265,2.061,45.365,2.425 c7.82,0.187,15.486,1.928,23.337,1.903c2.602-0.008,6.644-0.984,9,0.468c-2.584,1.794-8.164,0.984-10.809,1.165 c-13.329,0.899-26.632,2.315-39.939,3.953c-6.761,0.834-13.413,0.95-20.204,0.938c-1.429-0.001-2.938-0.155-4.142,0.436 c5.065,4.68,15.128,2.853,20.742,2.904c11.342,0.104,22.689-0.081,34.035-0.081c9.067,0,20.104-2.412,29.014,0.643 c-4.061,4.239-12.383,3.389-17.056,4.292c-11.054,2.132-21.575,5.041-32.725,5.289c-5.591,0.124-11.278,1.001-16.824,2.088 c-4.515,0.885-9.461,0.823-13.881,2.301c2.302,3.186,7.315,2.59,10.13,2.694c15.753,0.588,31.413-0.231,47.097-2.172 c7.904-0.979,15.06,1.748,22.549,4.877c-12.278,4.992-25.996,4.737-38.58,5.989c-8.467,0.839-16.773,1.041-25.267,0.984 c-4.727-0.031-10.214-0.851-14.782,1.551c12.157,4.923,26.295,2.283,38.739,2.182c7.176-0.06,14.323,1.151,21.326,3.07 c-2.391,2.98-7.512,3.388-10.368,4.143c-8.208,2.165-16.487,3.686-24.71,5.709c-6.854,1.685-13.604,3.616-20.507,4.714 c-1.707,0.273-3.337,0.483-4.923,1.366c2.023,0.749,3.73,0.558,5.95,0.597c9.749,0.165,19.555,0.31,29.304-0.027 c15.334-0.528,30.422-4.721,45.782-4.653'],
swirl : ['M49.346,46.341c-3.79-2.005,3.698-10.294,7.984-8.89 c8.713,2.852,4.352,20.922-4.901,20.269c-4.684-0.33-12.616-7.405-14.38-11.818c-2.375-5.938,7.208-11.688,11.624-13.837 c9.078-4.42,18.403-3.503,22.784,6.651c4.049,9.378,6.206,28.09-1.462,36.276c-7.091,7.567-24.673,2.277-32.357-1.079 c-11.474-5.01-24.54-19.124-21.738-32.758c3.958-19.263,28.856-28.248,46.044-23.244c20.693,6.025,22.012,36.268,16.246,52.826 c-5.267,15.118-17.03,26.26-33.603,21.938c-11.054-2.883-20.984-10.949-28.809-18.908C9.236,66.096,2.704,57.597,6.01,46.371 c3.059-10.385,12.719-20.155,20.892-26.604C40.809,8.788,58.615,1.851,75.058,12.031c9.289,5.749,16.787,16.361,18.284,27.262 c0.643,4.698,0.646,10.775-3.811,13.746'],
diagonal : ['M16.053,91.059c0.435,0,0.739-0.256,0.914-0.768 c3.101-2.85,5.914-6.734,8.655-9.865C41.371,62.438,56.817,44.11,70.826,24.721c3.729-5.16,6.914-10.603,10.475-15.835 c0.389-0.572,0.785-1.131,1.377-1.521'],
list : ['M1.986,8.91c41.704,4.081,83.952,5.822,125.737,2.867 c17.086-1.208,34.157-0.601,51.257-0.778c21.354-0.223,42.706-1.024,64.056-1.33c18.188-0.261,36.436,0.571,54.609,0.571','M3.954,25.923c9.888,0.045,19.725-0.905,29.602-1.432 c16.87-0.897,33.825-0.171,50.658-2.273c14.924-1.866,29.906-1.407,44.874-1.936c19.9-0.705,39.692-0.887,59.586,0.45 c35.896,2.407,71.665-1.062,107.539-1.188']
},
animDefs = {
cross : { speed : .2, easing : 'ease-in-out' },
fill : { speed : .8, easing : 'ease-in-out' },
checkmark : { speed : .2, easing : 'ease-in-out' },
circle : { speed : .2, easing : 'ease-in-out' },
boxfill : { speed : .8, easing : 'ease-in' },
swirl : { speed : .8, easing : 'ease-in' },
diagonal : { speed : .2, easing : 'ease-in-out' },
list : { speed : .3, easing : 'ease-in-out' }
};
function createSVGEl( def ) {
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
if( def ) {
svg.setAttributeNS( null, 'viewBox', def.viewBox );
svg.setAttributeNS( null, 'preserveAspectRatio', def.preserveAspectRatio );
}
else {
svg.setAttributeNS( null, 'viewBox', '0 0 100 100' );
}
svg.setAttribute( 'xmlns', 'http://www.w3.org/2000/svg' );
return svg;
}
function controlCheckbox( el, type, svgDef ) {
var svg = createSVGEl( svgDef );
el.parentNode.appendChild( svg );
el.addEventListener( 'change', function() {
if( el.checked ) {
draw( el, type );
}
else {
reset( el );
}
} );
}
function controlRadiobox( el, type ) {
var svg = createSVGEl();
el.parentNode.appendChild( svg );
el.addEventListener( 'change', function() {
resetRadio( el );
draw( el, type );
} );
}
checkbxsCross.forEach( function( el, i ) { controlCheckbox( el, 'cross' ); } );
radiobxsFill.forEach( function( el, i ) { controlRadiobox( el, 'fill' ); } );
checkbxsCheckmark.forEach( function( el, i ) { controlCheckbox( el, 'checkmark' ); } );
radiobxsCircle.forEach( function( el, i ) { controlRadiobox( el, 'circle' ); } );
checkbxsBoxfill.forEach( function( el, i ) { controlCheckbox( el, 'boxfill' ); } );
radiobxsSwirl.forEach( function( el, i ) { controlRadiobox( el, 'swirl' ); } );
checkbxsDiagonal.forEach( function( el, i ) { controlCheckbox( el, 'diagonal' ); } );
checkbxsList.forEach( function( el ) { controlCheckbox( el, 'list', { viewBox : '0 0 300 100', preserveAspectRatio : 'none' } ); } );
function draw( el, type ) {
var paths = [], pathDef,
animDef,
svg = el.parentNode.querySelector( 'svg' );
switch( type ) {
case 'cross': pathDef = pathDefs.cross; animDef = animDefs.cross; break;
case 'fill': pathDef = pathDefs.fill; animDef = animDefs.fill; break;
case 'checkmark': pathDef = pathDefs.checkmark; animDef = animDefs.checkmark; break;
case 'circle': pathDef = pathDefs.circle; animDef = animDefs.circle; break;
case 'boxfill': pathDef = pathDefs.boxfill; animDef = animDefs.boxfill; break;
case 'swirl': pathDef = pathDefs.swirl; animDef = animDefs.swirl; break;
case 'diagonal': pathDef = pathDefs.diagonal; animDef = animDefs.diagonal; break;
case 'list': pathDef = pathDefs.list; animDef = animDefs.list; break;
};
paths.push( document.createElementNS('http://www.w3.org/2000/svg', 'path' ) );
if( type === 'cross' || type === 'list' ) {
paths.push( document.createElementNS('http://www.w3.org/2000/svg', 'path' ) );
}
for( var i = 0, len = paths.length; i < len; ++i ) {
var path = paths[i];
svg.appendChild( path );
path.setAttributeNS( null, 'd', pathDef[i] );
var length = path.getTotalLength();
// Clear any previous transition
//path.style.transition = path.style.WebkitTransition = path.style.MozTransition = 'none';
// Set up the starting positions
path.style.strokeDasharray = length + ' ' + length;
if( i === 0 ) {
path.style.strokeDashoffset = Math.floor( length ) - 1;
}
else path.style.strokeDashoffset = length;
// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
path.getBoundingClientRect();
// Define our transition
path.style.transition = path.style.WebkitTransition = path.style.MozTransition = 'stroke-dashoffset ' + animDef.speed + 's ' + animDef.easing + ' ' + i * animDef.speed + 's';
// Go!
path.style.strokeDashoffset = '0';
}
}
function reset( el ) {
Array.prototype.slice.call( el.parentNode.querySelectorAll( 'svg > path' ) ).forEach( function( el ) { el.parentNode.removeChild( el ); } );
}
function resetRadio( el ) {
Array.prototype.slice.call( document.querySelectorAll( 'input[type="radio"][name="' + el.getAttribute( 'name' ) + '"]' ) ).forEach( function( el ) {
var path = el.parentNode.querySelector( 'svg > path' );
if( path ) {
path.parentNode.removeChild( path );
}
} );
}
}
Also see: Tab Triggers