82 lines
5.5 KiB
HTML
82 lines
5.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" >
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>CodePen - Happy New Year</title>
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
|
||
|
|
<link rel="stylesheet" href="./style.css">
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- partial:index.partial.html -->
|
||
|
|
<div id="firework"></div>
|
||
|
|
|
||
|
|
<div class="task-item">
|
||
|
|
<label class="checkbox">
|
||
|
|
<input value="2020" type="checkbox" />
|
||
|
|
<svg viewBox="0 0 21 18">
|
||
|
|
<symbol id="tick-path" viewBox="0 0 21 18" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<path d="M5.22003 7.26C5.72003 7.76 7.57 9.7 8.67 11.45C12.2 6.05 15.65 3.5 19.19 1.69" fill="none" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" />
|
||
|
|
</symbol>
|
||
|
|
<defs>
|
||
|
|
<mask id="tick">
|
||
|
|
<use class="tick mask" href="#tick-path" />
|
||
|
|
</mask>
|
||
|
|
</defs>
|
||
|
|
<path class="shape" d="M1.08722 4.13374C1.29101 2.53185 2.53185 1.29101 4.13374 1.08722C5.50224 0.913124 7.25112 0.75 9 0.75C10.7489 0.75 12.4978 0.913124 13.8663 1.08722C15.4681 1.29101 16.709 2.53185 16.9128 4.13374C17.0869 5.50224 17.25 7.25112 17.25 9C17.25 10.7489 17.0869 12.4978 16.9128 13.8663C16.709 15.4681 15.4682 16.709 13.8663 16.9128C12.4978 17.0869 10.7489 17.25 9 17.25C7.25112 17.25 5.50224 17.0869 4.13374 16.9128C2.53185 16.709 1.29101 15.4681 1.08722 13.8663C0.913124 12.4978 0.75 10.7489 0.75 9C0.75 7.25112 0.913124 5.50224 1.08722 4.13374Z" />
|
||
|
|
<use class="tick" href="#tick-path" stroke="currentColor" />
|
||
|
|
<path fill="#2C2C31" mask="url(#tick)" d="M4.03909 0.343217C5.42566 0.166822 7.20841 0 9 0C10.7916 0 12.5743 0.166822 13.9609 0.343217C15.902 0.590152 17.4098 2.09804 17.6568 4.03909C17.8332 5.42566 18 7.20841 18 9C18 10.7916 17.8332 12.5743 17.6568 13.9609C17.4098 15.902 15.902 17.4098 13.9609 17.6568C12.5743 17.8332 10.7916 18 9 18C7.20841 18 5.42566 17.8332 4.03909 17.6568C2.09805 17.4098 0.590152 15.902 0.343217 13.9609C0.166822 12.5743 0 10.7916 0 9C0 7.20841 0.166822 5.42566 0.343217 4.03909C0.590151 2.09805 2.09804 0.590152 4.03909 0.343217Z" />
|
||
|
|
</svg>
|
||
|
|
<svg class="lines" viewBox="0 0 11 11">
|
||
|
|
<path d="M5.88086 5.89441L9.53504 4.26746" />
|
||
|
|
<path d="M5.5274 8.78838L9.45391 9.55161" />
|
||
|
|
<path d="M3.49371 4.22065L5.55387 0.79198" />
|
||
|
|
</svg>
|
||
|
|
</label>
|
||
|
|
<div class="text">2020</a></div>
|
||
|
|
<button class="flag">
|
||
|
|
<svg viewBox="0 0 18 18">
|
||
|
|
<path d="M7.66 16.75L2.25 2C8 -0.249996 9.5 3.50001 14 1.75C15.5 4.25002 16 8.00002 15.5 9C11 11 9.5 8.50002 5.03377 9.58975" />
|
||
|
|
<path class="fill" d="M7.66 16.75L2.25 2C8 -0.249996 9.5 3.50001 14 1.75C15.5 4.25002 16 8.00002 15.5 9C11 11 9.5 8.50002 5.03377 9.58975" />
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="task-item">
|
||
|
|
<label class="checkbox">
|
||
|
|
<input value="2021" type="checkbox" />
|
||
|
|
<svg viewBox="0 0 21 18">
|
||
|
|
<symbol id="tick-path-1" viewBox="0 0 21 18" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<path d="M5.22003 7.26C5.72003 7.76 7.57 9.7 8.67 11.45C12.2 6.05 15.65 3.5 19.19 1.69" fill="none" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" />
|
||
|
|
</symbol>
|
||
|
|
<defs>
|
||
|
|
<mask id="tick-1">
|
||
|
|
<use class="tick mask" href="#tick-path-1" />
|
||
|
|
</mask>
|
||
|
|
</defs>
|
||
|
|
<path class="shape" d="M1.08722 4.13374C1.29101 2.53185 2.53185 1.29101 4.13374 1.08722C5.50224 0.913124 7.25112 0.75 9 0.75C10.7489 0.75 12.4978 0.913124 13.8663 1.08722C15.4681 1.29101 16.709 2.53185 16.9128 4.13374C17.0869 5.50224 17.25 7.25112 17.25 9C17.25 10.7489 17.0869 12.4978 16.9128 13.8663C16.709 15.4681 15.4682 16.709 13.8663 16.9128C12.4978 17.0869 10.7489 17.25 9 17.25C7.25112 17.25 5.50224 17.0869 4.13374 16.9128C2.53185 16.709 1.29101 15.4681 1.08722 13.8663C0.913124 12.4978 0.75 10.7489 0.75 9C0.75 7.25112 0.913124 5.50224 1.08722 4.13374Z" />
|
||
|
|
<use class="tick" href="#tick-path-1" stroke="currentColor" />
|
||
|
|
<path fill="#2C2C31" mask="url(#tick-1)" d="M4.03909 0.343217C5.42566 0.166822 7.20841 0 9 0C10.7916 0 12.5743 0.166822 13.9609 0.343217C15.902 0.590152 17.4098 2.09804 17.6568 4.03909C17.8332 5.42566 18 7.20841 18 9C18 10.7916 17.8332 12.5743 17.6568 13.9609C17.4098 15.902 15.902 17.4098 13.9609 17.6568C12.5743 17.8332 10.7916 18 9 18C7.20841 18 5.42566 17.8332 4.03909 17.6568C2.09805 17.4098 0.590152 15.902 0.343217 13.9609C0.166822 12.5743 0 10.7916 0 9C0 7.20841 0.166822 5.42566 0.343217 4.03909C0.590151 2.09805 2.09804 0.590152 4.03909 0.343217Z" />
|
||
|
|
</svg>
|
||
|
|
<svg class="lines" viewBox="0 0 11 11">
|
||
|
|
<path d="M5.88086 5.89441L9.53504 4.26746" />
|
||
|
|
<path d="M5.5274 8.78838L9.45391 9.55161" />
|
||
|
|
<path d="M3.49371 4.22065L5.55387 0.79198" />
|
||
|
|
</svg>
|
||
|
|
</label>
|
||
|
|
<div class="text">2021</div>
|
||
|
|
<button class="flag">
|
||
|
|
<svg viewBox="0 0 18 18">
|
||
|
|
<path d="M7.66 16.75L2.25 2C8 -0.249996 9.5 3.50001 14 1.75C15.5 4.25002 16 8.00002 15.5 9C11 11 9.5 8.50002 5.03377 9.58975" />
|
||
|
|
<path class="fill" d="M7.66 16.75L2.25 2C8 -0.249996 9.5 3.50001 14 1.75C15.5 4.25002 16 8.00002 15.5 9C11 11 9.5 8.50002 5.03377 9.58975" />
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<!-- partial -->
|
||
|
|
<script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
|
||
|
|
<script src='https://assets.codepen.io/16327/MorphSVGPlugin3.min.js'></script>
|
||
|
|
<script src='https://unpkg.com/gsap@3/dist/EasePack.min.js'></script><script src="./script.js"></script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|