<html>
<head>
<title>Clipboard Animated with CSS / Sass</title>
</head>
<body>
<svg width="244px" height="259px" viewBox="0 0 244 259" id="clipboard" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="path-1" d="M0,199L199,199L199,0L0,0Z" class="UYaFUNuu_0"></path>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g>
<g transform="translate(23.000000, 30.000000)">
<g>
<g>
<path d="M144.924888,173.05807 L51.9296668,173.05807 C48.9891871,173.05807 46.5829499,170.65237 46.5829499,167.71189 L46.5829499,29.1950164 C46.5829499,26.2540003 48.9891871,23.8482995 51.9296668,23.8482995 L144.924888,23.8482995 C147.865368,23.8482995 150.271068,26.2540003 150.271068,29.1950164 L150.271068,167.71189 C150.271068,170.65237 147.865368,173.05807 144.924888,173.05807 Z" id="Fill-12" fill="#FFFFFF" class="UYaFUNuu_1"></path>
<path d="M144.924888,173.05807 L51.9296668,173.05807 C48.9891871,173.05807 46.5829499,170.65237 46.5829499,167.71189 L46.5829499,29.1950164 C46.5829499,26.2540003 48.9891871,23.8482995 51.9296668,23.8482995 L144.924888,23.8482995 C147.865368,23.8482995 150.271068,26.2540003 150.271068,29.1950164 L150.271068,167.71189 C150.271068,170.65237 147.865368,173.05807 144.924888,173.05807 Z" id="Stroke-14" stroke="#2B3D52" stroke-width="2" class="UYaFUNuu_2"></path>
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Clip-17"></g>
<path id="Fill-16" fill="#FFFFFF" mask="url(#mask-2)" d="M58.6277601,157.883704L138.290518,157.883704L138.290518,46.6089111L58.6277601,46.6089111Z" class="UYaFUNuu_3"></path>
<path id="Stroke-18" stroke="#2B3D52" stroke-width="2" mask="url(#mask-2)" d="M58.6277601,157.883704L138.290518,157.883704L138.290518,46.6089111L58.6277601,46.6089111Z" class="UYaFUNuu_4"></path>
<path d="M66.8149741,66.8409889 L130.039581,66.8409889" id="Stroke-19" stroke="#2B3D52" stroke-width="2" mask="url(#mask-2)" class="UYaFUNuu_5"></path>
<path d="M66.8149741,84.7966892 L130.039581,84.7966892" id="Stroke-20" stroke="#2B3D52" stroke-width="2" mask="url(#mask-2)" class="UYaFUNuu_6"></path>
<path d="M66.8149741,102.752443 L130.039581,102.752443" id="Stroke-21" stroke="#2B3D52" stroke-width="2" mask="url(#mask-2)" class="UYaFUNuu_7"></path>
<path d="M66.8149741,120.708197 L130.039581,120.708197" id="Stroke-22" stroke="#2B3D52" stroke-width="2" mask="url(#mask-2)" class="UYaFUNuu_8"></path>
<path d="M66.8149741,138.663951 L130.039581,138.663951" id="Stroke-23" stroke="#2B3D52" stroke-width="2" mask="url(#mask-2)" class="UYaFUNuu_9"></path>
<path d="M127.120288,31.9150943 L121.833647,31.9150943 C121.493577,24.9420485 115.670547,19.5781671 108.579496,19.5781671 L86.2496574,19.5781671 C79.1580698,19.5781671 73.3355765,24.9420485 72.9949701,31.9150943 L67.708865,31.9150943 C60.4011129,31.9150943 54.979838,37.4146819 54.979838,44.722434 L54.979838,46.6089111 C54.979838,48.0003019 55.56021,49.615903 56.9510644,49.615903 L75.4913205,49.615903 L119.337833,49.615903 L137.878089,49.615903 C139.268943,49.615903 140.265552,48.0003019 140.265552,46.6089111 L140.265552,44.722434 C140.265552,37.4146819 134.42804,31.9150943 127.120288,31.9150943" id="Fill-24" fill="#FFFFFF" mask="url(#mask-2)" class="UYaFUNuu_10"></path>
<path d="M127.120288,31.9150943 L121.833647,31.9150943 C121.493577,24.9420485 115.670547,19.5781671 108.579496,19.5781671 L86.2496574,19.5781671 C79.1580698,19.5781671 73.3355765,24.9420485 72.9949701,31.9150943 L67.708865,31.9150943 C60.4011129,31.9150943 54.979838,37.4146819 54.979838,44.722434 L54.979838,46.6089111 C54.979838,48.0003019 55.56021,49.615903 56.9510644,49.615903 L75.4913205,49.615903 L119.337833,49.615903 L137.878089,49.615903 C139.268943,49.615903 140.265552,48.0003019 140.265552,46.6089111 L140.265552,44.722434 C140.265552,37.4146819 134.42804,31.9150943 127.120288,31.9150943 Z" id="Stroke-25" stroke="#2B3D52" stroke-width="2" mask="url(#mask-2)" class="UYaFUNuu_11"></path>
<path d="M110.439851,20.687096 C110.439851,27.3216809 105.061487,32.6995084 98.4274383,32.6995084 C91.7928534,32.6995084 86.4144895,27.3216809 86.4144895,20.687096 C86.4144895,14.0525111 91.7928534,8.67468356 98.4274383,8.67468356 C105.061487,8.67468356 110.439851,14.0525111 110.439851,20.687096" id="Fill-26" fill="#FFFFFF" mask="url(#mask-2)" class="UYaFUNuu_12"></path>
<path d="M110.439851,20.687096 C110.439851,27.3216809 105.061487,32.6995084 98.4274383,32.6995084 C91.7928534,32.6995084 86.4144895,27.3216809 86.4144895,20.687096 C86.4144895,14.0525111 91.7928534,8.67468356 98.4274383,8.67468356 C105.061487,8.67468356 110.439851,14.0525111 110.439851,20.687096 Z" id="Stroke-27" stroke="#2B3D52" stroke-width="2" mask="url(#mask-2)" class="UYaFUNuu_13"></path>
<path d="M105.533026,20.687096 C105.533026,24.6113116 102.351708,27.793166 98.4269555,27.793166 C94.5027399,27.793166 91.3214218,24.6113116 91.3214218,20.687096 C91.3214218,16.7628803 94.5027399,13.5810259 98.4269555,13.5810259 C102.351708,13.5810259 105.533026,16.7628803 105.533026,20.687096" id="Fill-28" fill="#FFFFFF" mask="url(#mask-2)" class="UYaFUNuu_14"></path>
<path d="M105.533026,20.687096 C105.533026,24.6113116 102.351708,27.793166 98.4269555,27.793166 C94.5027399,27.793166 91.3214218,24.6113116 91.3214218,20.687096 C91.3214218,16.7628803 94.5027399,13.5810259 98.4269555,13.5810259 C102.351708,13.5810259 105.533026,16.7628803 105.533026,20.687096 Z" id="Stroke-29" stroke="#2B3D52" stroke-width="2" mask="url(#mask-2)" class="UYaFUNuu_15"></path>
<g id="Group-32" mask="url(#mask-2)">
<g transform="translate(81.530997, 92.258760)">
<path id="Fill-30" stroke="none" fill="#FFFFFF" fill-rule="evenodd" d="M3.73492426,15.3105558L0.193689757,0.186555795L15.179838,3.86564205" class="UYaFUNuu_16"></path>
<path id="Stroke-31" stroke="#2B3D52" stroke-width="2" stroke-linejoin="round" fill="none" d="M3.73492426,15.3105558L0.193689757,0.186555795L15.179838,3.86564205" class="UYaFUNuu_17"></path>
</g>
</g>
<path id="Fill-33" fill="#FFFFFF" mask="url(#mask-2)" d="M159.815076,181.89941L171.112483,170.602003L96.9423404,96.4313235L85.644397,107.72873Z" class="UYaFUNuu_18"></path>
<path id="Stroke-34" stroke="#2B3D52" stroke-width="2" mask="url(#mask-2)" d="M171.112483,170.602003L96.9423404,96.4313235L85.644397,107.72873L159.815076,181.89941L159.815076,181.89941" class="UYaFUNuu_19"></path>
<g id="Group-37" mask="url(#mask-2)">
<g transform="translate(91.185984, 101.913747)">
<path d="M0.352943396,0.412053369 L74.0322911,74.0914011" id="Fill-35" stroke="none" fill="#FFFFFF" fill-rule="evenodd" class="UYaFUNuu_20"></path>
<path d="M0.352943396,0.412053369 L74.0322911,74.0914011" id="Stroke-36" stroke="#2B3D52" stroke-width="2" stroke-linejoin="round" fill="none" class="UYaFUNuu_21"></path>
</g>
</g>
</g>
</g>
</g>
<path d="M182.569411,211.653798 L187.882871,216.967258 C189.288745,218.373132 191.568394,218.373132 192.974268,216.967258 L199.180278,210.761248 C200.586152,209.355374 200.586152,207.075725 199.180278,205.669851 L193.866818,200.356391 L182.569411,211.653798 Z" id="Stroke-39" stroke="#2B3D52" stroke-width="2" class="UYaFUNuu_22"></path>
</g>
</g>
</svg>
<svg width="244px" height="259px" viewBox="0 0 244 259" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="burst">
<defs></defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-dasharray="3,6" stroke-linejoin="round">
<g stroke="#8eccc7" stroke-width="2">
<path d="M122,128 L84,36" id="Stroke-9" class="GHUcgnpr_0"></path>
<path d="M124,131 L52,59" id="Stroke-7" class="GHUcgnpr_1"></path>
<path d="M121,129 L30,91" id="Stroke-11" class="GHUcgnpr_2"></path>
<path d="M121,130 L22,130" id="Stroke-1" class="GHUcgnpr_3"></path>
<path d="M122,130 L31,168" id="Stroke-8" class="GHUcgnpr_4"></path>
<path d="M124,129 L52,199" id="Stroke-6" class="GHUcgnpr_5"></path>
<path d="M122,133 L83,223" id="Stroke-10" class="GHUcgnpr_6"></path>
<path d="M123,130 L123,232.047357" id="Stroke-3-Copy" class="GHUcgnpr_7"></path>
<path d="M125,133 L163,224" id="Stroke-9" class="GHUcgnpr_8"></path>
<path d="M124,131 L193,200" id="Stroke-7" class="GHUcgnpr_9"></path>
<path d="M125,131 L216,169" id="Stroke-11" class="GHUcgnpr_10"></path>
<path d="M125,130 L224,130" id="Stroke-1-Copy" class="GHUcgnpr_11"></path>
<path d="M124,129 L214,92" id="Stroke-8" class="GHUcgnpr_12"></path>
<path d="M124,129 L192,59" id="Stroke-6" class="GHUcgnpr_13"></path>
<path d="M124,128 L162,37" id="Stroke-10" class="GHUcgnpr_14"></path>
<path d="M123,31 L123,130" id="Stroke-3" transform="translate(123.500000, 80.500000) scale(1, -1) translate(-123.500000, -80.500000) " class="GHUcgnpr_15"></path>
</g>
</g>
</svg>
</body>
</html>
#clipboard
z-index: 1
text-align: center
position: absolute
width: 300px
padding-top: 10px
#burst
text-align: center
position: relative
width: 300px
padding-top: 10px
.GHUcgnpr_0
stroke-dasharray: 100 102
stroke-dashoffset: 101
animation: GHUcgnpr_draw 1000ms ease-in-out 0ms forwards
animation-delay: 1s
.GHUcgnpr_1
stroke-dasharray: 102 104
stroke-dashoffset: 103
animation: GHUcgnpr_draw 1000ms ease-in-out 0ms forwards
animation-delay: 1s
.GHUcgnpr_2
stroke-dasharray: 99 101
stroke-dashoffset: 100
animation: GHUcgnpr_draw 1000ms ease-in-out 0ms forwards
animation-delay: 1s
.GHUcgnpr_3
stroke-dasharray: 99 101
stroke-dashoffset: 100
animation: GHUcgnpr_draw 1000ms ease-in-out 0ms forwards
animation-delay: 1s
.GHUcgnpr_4
stroke-dasharray: 99 101
stroke-dashoffset: 100
animation: GHUcgnpr_draw 1000ms ease-in-out 0ms forwards
animation-delay: 1s
.GHUcgnpr_5
stroke-dasharray: 101 103
stroke-dashoffset: 102
animation: GHUcgnpr_draw 1000ms ease-in-out 0ms forwards
animation-delay: 1s
.GHUcgnpr_6
stroke-dasharray: 99 101
stroke-dashoffset: 100
animation: GHUcgnpr_draw 1000ms ease-in-out 0ms forwards
animation-delay: 1s
.GHUcgnpr_7
stroke-dasharray: 103 105
stroke-dashoffset: 104
animation: GHUcgnpr_draw 1000ms ease-in-out 0ms forwards
animation-delay: 1s
.GHUcgnpr_8
stroke-dasharray: 99 101
stroke-dashoffset: 100
animation: GHUcgnpr_draw 1000ms ease-in-out 0ms forwards
animation-delay: 1s
.GHUcgnpr_9
stroke-dasharray: 98 100
stroke-dashoffset: 99
animation: GHUcgnpr_draw 1000ms ease-in-out 0ms forwards
animation-delay: 1s
.GHUcgnpr_10
stroke-dasharray: 99 101
stroke-dashoffset: 100
animation: GHUcgnpr_draw 1000ms ease-in-out 0ms forwards
animation-delay: 1s
.GHUcgnpr_11
stroke-dasharray: 99 101
stroke-dashoffset: 100
animation: GHUcgnpr_draw 1000ms ease-in-out 0ms forwards
animation-delay: 1s
.GHUcgnpr_12
stroke-dasharray: 98 100
stroke-dashoffset: 99
animation: GHUcgnpr_draw 1000ms ease-in-out 0ms forwards
animation-delay: 1s
.GHUcgnpr_13
stroke-dasharray: 98 100
stroke-dashoffset: 99
animation: GHUcgnpr_draw 1000ms ease-in-out 0ms forwards
animation-delay: 1s
.GHUcgnpr_14
stroke-dasharray: 99 101
stroke-dashoffset: 100
animation: GHUcgnpr_draw 1000ms ease-in-out 0ms forwards
animation-delay: 1s
.GHUcgnpr_15
stroke-dasharray: 99 101
stroke-dashoffset: 100
animation: GHUcgnpr_draw 1000ms ease-in-out 0ms forwards
animation-delay: 1s
.UYaFUNuu_0
stroke-dasharray: 796 798
stroke-dashoffset: 797
animation: UYaFUNuu_draw 1400ms ease-in-out 0ms forwards
.UYaFUNuu_1
stroke-dasharray: 497 499
stroke-dashoffset: 498
animation: UYaFUNuu_draw 1400ms ease-in-out 4ms forwards
.UYaFUNuu_2
stroke-dasharray: 497 499
stroke-dashoffset: 498
animation: UYaFUNuu_draw 1400ms ease-in-out 9ms forwards
.UYaFUNuu_3
stroke-dasharray: 382 384
stroke-dashoffset: 383
animation: UYaFUNuu_draw 1400ms ease-in-out 13ms forwards
.UYaFUNuu_4
stroke-dasharray: 382 384
stroke-dashoffset: 383
animation: UYaFUNuu_draw 1400ms ease-in-out 18ms forwards
.UYaFUNuu_5
stroke-dasharray: 64 66
stroke-dashoffset: 65
animation: UYaFUNuu_draw 1400ms ease-in-out 22ms forwards
.UYaFUNuu_6
stroke-dasharray: 64 66
stroke-dashoffset: 65
animation: UYaFUNuu_draw 1400ms ease-in-out 27ms forwards
.UYaFUNuu_7
stroke-dasharray: 64 66
stroke-dashoffset: 65
animation: UYaFUNuu_draw 1400ms ease-in-out 31ms forwards
.UYaFUNuu_8
stroke-dasharray: 64 66
stroke-dashoffset: 65
animation: UYaFUNuu_draw 1400ms ease-in-out 36ms forwards
.UYaFUNuu_9
stroke-dasharray: 64 66
stroke-dashoffset: 65
animation: UYaFUNuu_draw 1400ms ease-in-out 40ms forwards
.UYaFUNuu_10
stroke-dasharray: 207 209
stroke-dashoffset: 208
animation: UYaFUNuu_draw 1400ms ease-in-out 45ms forwards
.UYaFUNuu_11
stroke-dasharray: 207 209
stroke-dashoffset: 208
animation: UYaFUNuu_draw 1400ms ease-in-out 50ms forwards
.UYaFUNuu_12
stroke-dasharray: 76 78
stroke-dashoffset: 77
animation: UYaFUNuu_draw 1400ms ease-in-out 54ms forwards
.UYaFUNuu_13
stroke-dasharray: 76 78
stroke-dashoffset: 77
animation: UYaFUNuu_draw 1400ms ease-in-out 59ms forwards
.UYaFUNuu_14
stroke-dasharray: 45 47
stroke-dashoffset: 46
animation: UYaFUNuu_draw 1400ms ease-in-out 63ms forwards
.UYaFUNuu_15
stroke-dasharray: 45 47
stroke-dashoffset: 46
animation: UYaFUNuu_draw 1400ms ease-in-out 68ms forwards
.UYaFUNuu_16
stroke-dasharray: 31 33
stroke-dashoffset: 32
animation: UYaFUNuu_draw 1400ms ease-in-out 72ms forwards
.UYaFUNuu_17
stroke-dasharray: 31 33
stroke-dashoffset: 32
animation: UYaFUNuu_draw 1400ms ease-in-out 77ms forwards
.UYaFUNuu_18
stroke-dasharray: 242 244
stroke-dashoffset: 243
animation: UYaFUNuu_draw 1400ms ease-in-out 81ms forwards
.UYaFUNuu_19
stroke-dasharray: 226 228
stroke-dashoffset: 227
animation: UYaFUNuu_draw 1400ms ease-in-out 86ms forwards
.UYaFUNuu_20
stroke-dasharray: 105 107
stroke-dashoffset: 106
animation: UYaFUNuu_draw 1400ms ease-in-out 90ms forwards
.UYaFUNuu_21
stroke-dasharray: 105 107
stroke-dashoffset: 106
animation: UYaFUNuu_draw 1400ms ease-in-out 95ms forwards
.UYaFUNuu_22
stroke-dasharray: 52 54
stroke-dashoffset: 53
animation: UYaFUNuu_draw 1400ms ease-in-out 100ms forwards
@keyframes GHUcgnpr_draw
100%
stroke-dashoffset: 0
@keyframes GHUcgnpr_fade
0%
stroke-opacity: 1
100%
stroke-opacity: 0
0.3076923076923%
stroke-opacity: 1
@keyframes UYaFUNuu_draw
100%
stroke-dashoffset: 0
@keyframes UYaFUNuu_fade
0%
stroke-opacity: 1
100%
stroke-opacity: 0
0.98245614035088%
stroke-opacity: 1
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.