☑️ CSS-only Todo List Checkbox Animation
Mon Mar 08 2021 20:38:34 GMT+0000 (Coordinated Universal Time)
Saved by
@randomize_first
#javascript
console.clear();
setTimeout(function(){
document.querySelector('input[type="checkbox"]').setAttribute('checked',true);
},0);
/*
// Javascript was initially used, but wasn't really necessary. Javascript droppped, but left here for archival purposes.
10
var todoTemplate = function(id){
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 25" class="todo__icon">
<defs>
<mask id="myMask${id}" maskUnits="userSpaceOnUse" x="0" y="0">
<g stroke="#FFF" fill="none">
<path class="todo__line" d="M21 12.3h8"/>
16
<path class="todo__box" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 .7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"/>
17
<path class="todo__check" d="M10 13l2 2 5-5"/>
content_copyCOPY
https://codepen.io/shshaw/pen/WXMdwE
Comments