<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title></title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a {
padding: 0;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 13px 0;
}
</style>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<!--[if !mso]><!-->
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,500,700);
</style>
<!--<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}
.mj-column-per-50 {
width: 50% !important;
max-width: 50%;
}
}
</style>
<style media="screen and (min-width:480px)">
.moz-text-html .mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}
.moz-text-html .mj-column-per-50 {
width: 50% !important;
max-width: 50%;
}
</style>
<style type="text/css">
@media only screen and (max-width:479px) {
table.mj-full-width-mobile {
width: 100% !important;
}
td.mj-full-width-mobile {
width: auto !important;
}
}
</style>
<style type="text/css">
.intro {
font-size: 16px;
}
.spark-item {
margin-bottom: 100px;
}
.spark-title {
font-weight: bold;
color: #505050;
padding: 5px 0 5px 0;
font-size: 18px;
}
.spark-item-type {
opacity: 0.5;
text-transform: uppercase;
margin: 0;
font-size: 11px;
}
.spark-desc {
padding-top: 4px;
font-size: 15px;
line-height: 1.5;
}
.spark-thumb {
border: 0;
display: block;
height: auto;
width: 100%;
outline: none;
text-decoration: none;
margin: 0 0 10px 0;
}
.sponsor-bg {
background: #333;
color: white;
border-top: 4px solid rgb(255, 116, 10);
border-radius: 14px;
}
.sponsor-bg h2 {
font-size: 2rem;
margin: 0;
line-height: 1.2;
}
.sponsor-bg h2,
.sponsor-bg p {
color: white;
}
.corner-header {
margin-bottom: 10px;
font-size: 24px;
}
.corner-intro {
opacity: 0.5;
margin: 0 0 15px 0;
border-bottom: 2px solid black;
padding-bottom: 15px;
}
hr {
border: 0;
border-top: 1px solid #999;
margin: 30px 0;
}
p {
margin: 0 0 15px 0;
}
</style>
</head>
<body style="word-spacing:normal;">
<div style="color:transparent;visibility:hidden;opacity:0;font-size:0px;border:0;max-height:1px;width:1px;margin:0px;padding:0px;border-width:0px!important;display:none!important;line-height:0px!important;"><img border="0" width="1" height="1" src="https://go.sparkpostmail2.com/q/roRiW2154cCKlqvkC8oWFg~~/AABEfhA~/tIxaGfGQldj5py7kGfdEcw42YTo_1BNDeVu5RFOj4xk-fI5F5XSLkSw0AzE9BBLSD5Y5rQYPyolBJD6Iit25Uw~~" alt=""/></div>
<div style="">
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="center" style="font-size:0px;padding:0;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td style="width:600px;">
<img src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=1200,quality=90,format=auto/codepen-spark/codepen-spark-header-2025.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="600" height="auto" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Lato, system-ui, sans-serif;font-size:13px;line-height:1.5;text-align:center;color:#000000;"><a href="https://go.sparkpostmail2.com/f/a/IteaVqkA8cvI4aMiFOrXxw~~/AABEfhA~/qVakOfl2XPt3rhsCuf3czdT9fBO7FxyM-fbf5V9KctMOS_8ceR3DUljoCEo2JMPA0Gcbf7PicIaG1jmjFARJVwtwt5mHhGiRQKciP3woiEInFYapkOgIgAjlON4gWa81" class="view-on-web-link">View this issue on CodePen</a></div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Lato, system-ui, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#000000;">
<h1 style="margin: 0; font-size: 24px;">Video Text, JavaScript Embroidery, and Shadow Solutions</h1>
</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Lato, system-ui, sans-serif;font-size:16px;line-height:1.5;text-align:left;color:#000000;"><p>This week's CodePen community highlights include the inimitable Ana Tudor's masterclass on creating selectable & CSS-styleable video text, a gorgeous work of JS embroidery from generative artist Dillo, and in Chris' Corner, a roundup of the answers to <a href="https://go.sparkpostmail2.com/f/a/mGdipDzr_AW3qwfZtgdf7g~~/AABEfhA~/HF7WFaEvWJE6V0OVSUZEVWBODPMyFejdQfZ3y64nZX-kTuWHEQjeJEAk3uqTmQl_-c2QU2jRPlBlhdUf-DMnoeRBZmiVkAkEVLlTWQas3PhK038FG05UMgiN8Wu0e_Ul8TMQ-i0LZ3buy8lQIoApLg~~">Andy Bell's light source shadow challenge</a>. </p>
<p>Plus, we have our collection of Pens from the first week of the <a href="https://go.sparkpostmail2.com/f/a/L_a1Ft6uEIOCGCE7NBnfOQ~~/AABEfhA~/lw2TQY1Unxosh8VgdFtsMBJ8j4U3eLDwtRZ4Z4DsTDeCcHinXuRq8oWwwAc0eBk3ncIFMTLyE4fQWeVYKbLufPa5JgWrtj4RtCIWr7n4EhhGd4PoB609cOBuRmALAUTWq0VzZLFWvtTMWFNMmKeNVw~~">February CodePen Challenge</a>, and Alvaro Montoro live-codes an adorable astronaut.</p></div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:300px;" ><![endif]-->
<div class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Lato, system-ui, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#000000;"><mj-raw>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/xQMywcYJB_cQIKBLk6rdVQ~~/AABEfhA~/_WTg_eXSrmT0EveK17B72hd6Mvtgu5Z3T2DYon6neH33_xTfwSBzrGyTXSUatHHAY-Ik1bZIqjbEfmTIkgutq2GNn4KTLjl8M88xAd97mKzYVgAxgz3oW1rN8GCNfYB0-Pz5e6MGtNUtzsu9Cgp6MQ~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/video-text-wrapping-thebabydino.png" alt="Video text - wrapping, selectable, stylable from CSS" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/xQMywcYJB_cQIKBLk6rdVQ~~/AABEfhA~/_WTg_eXSrmT0EveK17B72hd6Mvtgu5Z3T2DYon6neH33_xTfwSBzrGyTXSUatHHAY-Ik1bZIqjbEfmTIkgutq2GNn4KTLjl8M88xAd97mKzYVgAxgz3oW1rN8GCNfYB0-Pz5e6MGtNUtzsu9Cgp6MQ~~">Video text - wrapping, selectable, stylable from CSS</a></div>
<div class="spark-desc">Ana Tudor shares a cross-browser solution for video text "where the text can wrap naturally, is selectable, can be copied, allows for any backdrop (heck, you may even add another <video> or an interactive <canvas> behind) and is easily stylable from the CSS." Check out the Pen's description for an in-depth explanation of how it works.</div>
</div>
<div class="spark-item" data-type="collection">
<a href="https://go.sparkpostmail2.com/f/a/FfTaqhslPiRYfpqtZ44iYA~~/AABEfhA~/isx6dYfvuKmhgQwmONDXd4XYEg3uPsd-Z1ousN16SjJYT1w7y-FcOP65qyEK65_vDRplVb-_1WKVF9rDFmCouH0ZM6eqmRsM_hznpK6RznDwkKXf4RYhWhFtDa1nTI1mLpR4tIPiCfWJVqzvc17eMA~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/cpc-named-coll.png" alt="CodePen Challenge: Named Colors" height="" width="260" />
</a>
<div class="spark-item-type">collection</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/FfTaqhslPiRYfpqtZ44iYA~~/AABEfhA~/isx6dYfvuKmhgQwmONDXd4XYEg3uPsd-Z1ousN16SjJYT1w7y-FcOP65qyEK65_vDRplVb-_1WKVF9rDFmCouH0ZM6eqmRsM_hznpK6RznDwkKXf4RYhWhFtDa1nTI1mLpR4tIPiCfWJVqzvc17eMA~~">CodePen Challenge: Named Colors</a></div>
<div class="spark-desc">February's challenge is all about color! We kicked it off with a throwback to the early web: Named Colors. Check out our collection from week one, including Pens by <a href="https://go.sparkpostmail2.com/f/a/RncVUf6S8yXjyyZNwVjeTg~~/AABEfhA~/HF7WFaEvWJE6V0OVSUZEVbS8w-04FxkMFQxlnzS_9r7NfJpuZZi3NNFkfdi9dfd8wO1i3vkc1uje81YcV6XI8iDGRGD2Cwpx9LRnZMwQl-o7BtN8QljmQsCGo6t6wP6-gEHxhTzinKeEePI0tAnZlQ~~">Ryan Mulligan</a>, <a href="https://go.sparkpostmail2.com/f/a/GIxZUGZpyvQ1qfy2RxBXLA~~/AABEfhA~/lw2TQY1Unxosh8VgdFtsMK61oK7IvDPWhAeEvOnOqn45GhFHUBcsAlvCL8BeuRWjbLXCPjhhuojEf7NAQVj_ZKg-tfe39iymWGtSe_TkhIrVezXeytRjYsM2YNDbbuaF1fEfwscyrWQ59uoklfSo4A~~">Hola Soy Malva</a>, <a href="https://go.sparkpostmail2.com/f/a/c_FU5-tZryVP1wxVDWJ2Tw~~/AABEfhA~/Bk-fZ-RsZuqFLLWgU7HMer31mTj9WGTHGjGyol7yvXMP4woYXlm0h5JbSDIZbaXaQF8JdNIVNqKrAep8qsSp81riBVUAunfVpaykdePCgzp4_wJM39-8gjYFHbo8M_uWUJao8xSMg48g0TSUtZZJnQ~~">Toc</a>, and <a href="https://go.sparkpostmail2.com/f/a/EZse6h2CHl6fvynMhsRRIA~~/AABEfhA~/foWjzkW8fzalRFosdPQ3qg619lj7Pt9gFO0G0_YqjKH_zuxdmYuM8MFMRD3NXZjdsHugGg9vGN-K9rifmWJrdbat2gcqGZyP9GTkas9f7Ugpk-Clogeemo6lpG3XQyw_E2jplBrpsyk0mB5EIeQ89A~~">Anna Pawl</a>. Want to get in on the colorful fun? <a href="https://go.sparkpostmail2.com/f/a/OAFT4-JCT4pGZ0d5d6ebvA~~/AABEfhA~/_Pd2mOWDZY-34VaOISxTrcmRP-jbmOSBAqzsTZslgYiXysVvkpBTsaLGXZ27C_JeFfeaebqcBPj7e3Ef_bNyp87cmCjfCo-A5jwk1pyKdsfcX-0aDdJnJNAHtc-12byf2UFro1pkL-wmGp2kcB5BfA~~">Week two is on now</a>!</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/pUlX2MQjOWjnoSuGT0ThBg~~/AABEfhA~/_WTg_eXSrmT0EveK17B72muuePWFABf49TCCw1bgy8CkWtASmYZjk8GMtyfRTuR99rMH-hkIMNeB6IjHRTl9wn2XU_xNl_JDH2Up-MLRF6wsp2Z0MsbaTlMfQ0h1jJ-c3FZHrV7N1SLvatl_dtIcYA~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/time-traveling-art-gallery.png" alt="Time-Traveling Art Gallery" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/pUlX2MQjOWjnoSuGT0ThBg~~/AABEfhA~/_WTg_eXSrmT0EveK17B72muuePWFABf49TCCw1bgy8CkWtASmYZjk8GMtyfRTuR99rMH-hkIMNeB6IjHRTl9wn2XU_xNl_JDH2Up-MLRF6wsp2Z0MsbaTlMfQ0h1jJ-c3FZHrV7N1SLvatl_dtIcYA~~">Time-Traveling Art Gallery</a></div>
<div class="spark-desc">Take a journey through the Metropolitan Museum of Art's collection in this wonderful Pen from notbigmuzzy. "This Pen fetches masterpieces via the MET API and pairs them with period-accurate (as much as I could find) background music to create an immersive historical atmosphere - Best enjoyed with headphones!"</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/iHeOItXn_fgL2_e1uYymtQ~~/AABEfhA~/77J9mLoZLKFVHlLX0Fpuhol9hFN73dbCW9MD79HgoKWBofJ7s7iQvDwCOIeAfzfQGpq9QmsYdPv-7oJ28kNqZWiqE3JQcRZXjnVtKzd-_k-sDoRRLNMZW_XKr7mfePw__6pg45UY5793Z95w-TlA3A~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/highlighted-text-css-vivitseng.png" alt="highlighted text effect w/ css gradient" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/iHeOItXn_fgL2_e1uYymtQ~~/AABEfhA~/77J9mLoZLKFVHlLX0Fpuhol9hFN73dbCW9MD79HgoKWBofJ7s7iQvDwCOIeAfzfQGpq9QmsYdPv-7oJ28kNqZWiqE3JQcRZXjnVtKzd-_k-sDoRRLNMZW_XKr7mfePw__6pg45UY5793Z95w-TlA3A~~">highlighted text effect w/ css gradient</a></div>
<div class="spark-desc">Vivi Tseng combines conic and linear gradients to create a text highlight that looks just like it was made with chisel-tip highlighter.</div>
</div>
<div class="spark-item" data-type="link">
<a href="https://go.sparkpostmail2.com/f/a/d4dlr5Bg4CZ0guHw1Q84jQ~~/AABEfhA~/55j6M11e8HuvaCsXEud8gmpC1QiTx4j1iQ9r_XrQXmB682ftGiWkDsQrG7bHmQ1v8h_tQJ_zrZKUyyAZiGHIoSqz0Aq_C84uFgxDBmUCh6E8F1oxvj8Cn6VuZmWZcGN6">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/custom-select-argyle-pen.png" alt="Nice Select" height="" width="260" />
</a>
<div class="spark-item-type">link</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/d4dlr5Bg4CZ0guHw1Q84jQ~~/AABEfhA~/55j6M11e8HuvaCsXEud8gmpC1QiTx4j1iQ9r_XrQXmB682ftGiWkDsQrG7bHmQ1v8h_tQJ_zrZKUyyAZiGHIoSqz0Aq_C84uFgxDBmUCh6E8F1oxvj8Cn6VuZmWZcGN6">Nice Select</a></div>
<div class="spark-desc">Adam Argyle demonstrates the potential of the <a href="https://go.sparkpostmail2.com/f/a/u3jjSqJVffJ8cjOhUk2zSQ~~/AABEfhA~/WSAawYkoEWN7cCacNcB6ESn0m4cFurdqde157MFsorA0qPN5kAyO0glb_TSUHRhzVFqzXsgPbd5yKwFTl2ol2B6XHNsR_zhRlXnp4ytOn-LKXrXMo_yS1RfpBk7-d1CW8jD3fP9mG4Dn3RkGh7xE8l4L3CwG3lqZl85T9VpvCP4~">customizable select</a> element in this detailed tutorial. "It's mostly CSS! A li'l JS sprinkle just to position the ::picker() and the selected option together; the JS is nice to have, CSS does the real work."</div>
</div>
</mj-raw></div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:300px;" ><![endif]-->
<div class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Lato, system-ui, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#000000;"><mj-raw>
<div class="spark-item" data-type="sponsor">
<a href="https://go.sparkpostmail2.com/f/a/BtbIBvUGlE1fR3yuJvNvJg~~/AABEfhA~/jZqT1n0eTpQYg5HQysEhF-gejawE91sdNlJdDk-FPeYyCaZS423VTnoDR_gjNcmGPazspuSgB-4JBFaOE0Mli8JQY3Zu2JDjaWKTQxseeGoK1YPPEOy3yJY2rmAI_e2D2ngSifG6dhxCcRICRXokmu_-9_1OiUiXgEl_Dmqs1lEIHEkZROs4rJ13b1xj4YbOammtTujfy3gRK7ecphtzvw~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/fem-2.jpg" alt="Functional JavaScript First Steps with Anjana Vakil" height="" width="260" />
</a>
<div class="spark-item-type">sponsor</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/BtbIBvUGlE1fR3yuJvNvJg~~/AABEfhA~/jZqT1n0eTpQYg5HQysEhF-gejawE91sdNlJdDk-FPeYyCaZS423VTnoDR_gjNcmGPazspuSgB-4JBFaOE0Mli8JQY3Zu2JDjaWKTQxseeGoK1YPPEOy3yJY2rmAI_e2D2ngSifG6dhxCcRICRXokmu_-9_1OiUiXgEl_Dmqs1lEIHEkZROs4rJ13b1xj4YbOammtTujfy3gRK7ecphtzvw~~">Functional JavaScript First Steps with Anjana Vakil</a></div>
<div class="spark-desc">A friendly, practical introduction to functional programming fundamentals in JavaScript. Learn the power of the pure function while exploring functional programming paradigms.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/R1aojpvSeLBkZDsEF29c-g~~/AABEfhA~/isx6dYfvuKmhgQwmONDXd9hvklnSScpisxxDBQHNY9LBpg9sh49Pl3ArkECnZ_DYoPCLMEynG-Gxn82HLtmNF8jCY5boY04An8tyWVpkyRvWEd0UR9TZ0zfAx6sTFnWGTXJZ4maE-2cd-DABx2W9lQ~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/embroidery-dillo.png" alt="Embroidery" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/R1aojpvSeLBkZDsEF29c-g~~/AABEfhA~/isx6dYfvuKmhgQwmONDXd9hvklnSScpisxxDBQHNY9LBpg9sh49Pl3ArkECnZ_DYoPCLMEynG-Gxn82HLtmNF8jCY5boY04An8tyWVpkyRvWEd0UR9TZ0zfAx6sTFnWGTXJZ4maE-2cd-DABx2W9lQ~~">Embroidery</a></div>
<div class="spark-desc">"Beauty is in the algorithms." Generative artist Dillo continues the thread of JavaScript embroidery he <a href="https://go.sparkpostmail2.com/f/a/4yX0N-c8rilCB3bdcOv4KQ~~/AABEfhA~/isx6dYfvuKmhgQwmONDXd9hvklnSScpisxxDBQHNY9IFtfGH1yLbZ1moHfoMacI4TVRm0DkAvoHYQ8vDhyV5rhFXse3GfltTwlsch9dT6FWFRZCLbuKIoNthfuJ6nBAgMIdCyPFLMJYT9hKxk5m-bw~~">started in 2020</a> with this gorgeous new creation. Refresh or resize the preview panel for a new pattern every time.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/zypcpCGY5IAQElh8uTT7eA~~/AABEfhA~/bS_Q0pjMp2qRLnJDVpxU-TKHcp0cNziw8_zVfYOouHf_FLXUQW9NVfclYNYcH6zO2XYzvKkA8f1rz_MusJ7MX4j9D7gLb2QeOEKW4gb78W3PR7bFF9ORTHLs1lQHwpaL4_2wFyLyB-FPRaFHnzbqHg~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/sticky-scroll-adir-SL.png" alt="Sticky Header - Pure CSS" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/zypcpCGY5IAQElh8uTT7eA~~/AABEfhA~/bS_Q0pjMp2qRLnJDVpxU-TKHcp0cNziw8_zVfYOouHf_FLXUQW9NVfclYNYcH6zO2XYzvKkA8f1rz_MusJ7MX4j9D7gLb2QeOEKW4gb78W3PR7bFF9ORTHLs1lQHwpaL4_2wFyLyB-FPRaFHnzbqHg~~">Sticky Header - Pure CSS</a></div>
<div class="spark-desc">Get a taste of the experimental <a href="https://go.sparkpostmail2.com/f/a/mEbrx_vMuZVvsT8zRw3Leg~~/AABEfhA~/ggY40wKeUEr7o1jpT8Rojr_xwISAF3SAwGaNnI3ov4YSTljIvedYIJdQObgzhgCh_12RBdznekgvUIuJjKT_xlYSrayKl-QzklBlojXTdR9bD_uUzVGItkP0neSIVglOzM1IV-JKFjDzJitK5UNNlu_3dQNes-AOzYKtiwgutDAHs-BXn3UV84oRcTDewf-c"><code>scroll-state(stuck)</code></a> container query in this tasty Pen from Adir-SL. Chrome only, for now!</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/nDrm5GwxoU3ZkrCA-ROV5w~~/AABEfhA~/vbpRuW8Ak_2iD9xzgWJrmn94iou2IVy-3NGQPw-pb4liQEsQLP0bbvVv9Z2jELUiS2izdbV2Jk1awkmFOGyiohV-LcabnGKvtaswf1qW7pxW1gzTnEMWec4juy7-2fsQJLU0XaIO5f1M5QZesIbrhe_nE2NGrcBiEzR9eXFamTTqO1OyM7TEnjLrzcXvLcgZ">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/perfect-pie-chart-css-tricks.png" alt="Trying to Make the Perfect Pie Chart in CSS" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/nDrm5GwxoU3ZkrCA-ROV5w~~/AABEfhA~/vbpRuW8Ak_2iD9xzgWJrmn94iou2IVy-3NGQPw-pb4liQEsQLP0bbvVv9Z2jELUiS2izdbV2Jk1awkmFOGyiohV-LcabnGKvtaswf1qW7pxW1gzTnEMWec4juy7-2fsQJLU0XaIO5f1M5QZesIbrhe_nE2NGrcBiEzR9eXFamTTqO1OyM7TEnjLrzcXvLcgZ">Trying to Make the Perfect Pie Chart in CSS</a></div>
<div class="spark-desc">At CSS-Tricks, Juan Diego Rodríguez bakes a CSS pie chart with three required ingredients: semantic HTML, customizable HTML, and minimal JavaScript. There's an embedded Pen to play with at every recipe step!</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/fM9OoWEAl_OHpwYP6NJNNA~~/AABEfhA~/HF7WFaEvWJE6V0OVSUZEVVr_ES7iAtLjmCELVxGebxz0gsH8Bo8qkWwCE8gK1JhQ6atZWb0j985i4qR_rBVLH324llrTfb4n0ITPhUgAcBJByEkPDVKVXaLjHz1WALIBq2P_QR8Z9bRvH9BKN-y5mg~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/css-art-cat-moon.png" alt="CSS Art: Cat looking at the stars" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/fM9OoWEAl_OHpwYP6NJNNA~~/AABEfhA~/HF7WFaEvWJE6V0OVSUZEVVr_ES7iAtLjmCELVxGebxz0gsH8Bo8qkWwCE8gK1JhQ6atZWb0j985i4qR_rBVLH324llrTfb4n0ITPhUgAcBJByEkPDVKVXaLjHz1WALIBq2P_QR8Z9bRvH9BKN-y5mg~~">CSS Art: Cat looking at the stars</a></div>
<div class="spark-desc">CSS cartoonist Alvaro Montoro sends a curious cat to space in this playful HTML & CSS animated illustration. Check out Alvaro's YouTube video and watch him <a href="https://go.sparkpostmail2.com/f/a/L06IycE4T0J4iSsQ4fzxLA~~/AABEfhA~/lw2TQY1Unxosh8VgdFtsMNPC3M98MgHIisBM4oTQiDqxfkyyi-zFNFvsGjPsHXyizu7OL-sUE_qy8QC3y-qOPSJOPExHlwSNZUPjidA1-5CW9Kz5VutsmvPYYjWKcEAUVI-4aZCYAAfrbW74slE01g~~">live code it</a>!</div>
</div>
</mj-raw></div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Lato, system-ui, sans-serif;font-size:16px;line-height:1.5;text-align:left;color:#000000;"><mj-raw>
<h2 class="corner-header">
<img src="https://assets.codepen.io/t-1/chriscorner.png" style="width: 65px; border-radius: 4px;" /> Chris’ Corner
</h2>
<p class="corner-intro">A collection of web design and development news and thoughts from CodePen's own Chris Coyier.</p>
</mj-raw>
<p>Andy Bell with pitch perfect bait for me: <a href="https://go.sparkpostmail2.com/f/a/mGdipDzr_AW3qwfZtgdf7g~~/AABEfhA~/HF7WFaEvWJE6V0OVSUZEVWBODPMyFejdQfZ3y64nZX-kTuWHEQjeJEAk3uqTmQl_-c2QU2jRPlBlhdUf-DMnoeRBZmiVkAkEVLlTWQas3PhK038FG05UMgiN8Wu0e_Ul8TMQ-i0LZ3buy8lQIoApLg~~">Fun shadow coding challenge</a>. Just a simple line across a page, but imagine that line is a <em>light source</em>. Squares below the light source have a <code>box-shadow</code>. How can we make it so as the squares scroll by, that <code>box-shadow</code> adjusts itself to honor that “light source”?</p>
<img src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/bell_light_boxes.png" alt="" width="450"/>
<p>JavaScript? Of course, the all-powerful JavaScript can do this. <a href="https://go.sparkpostmail2.com/f/a/LDqtEGU-OWhBelzPY6WuuQ~~/AABEfhA~/nVV6dvvvCpjWWno8no8-hge5SPZiYVA2Do0L15eAf0C_ry9mweIhd9GSjjNFj9wcrt-qQcfUtmSXBmefzLYWIAVFZd-dqyxW8uqFITchjhvl9V64SM00QIZS1sgOPk_msrGfTWMJzFUB0zeS4vd3XT8WOgDuhWiQpmtf74beu7_JZGb32r_7ZX4A7vFXsLKm">That’s what Andy himself did <em>eight years ago</em></a> with the inception of this idea.</p>
<p><a href="https://go.sparkpostmail2.com/f/a/ypOPzu5OZmgO9HvmkOACUw~~/AABEfhA~/Mq9VgpsKxgoaerxhxtYM47yTuRuEUKXbFCht6-05gKjLW0oxqpKOrHaY3yEbSRE0VwcT5sVWk3gYC4tXThPEmNS9HnCJcD8CR1Lzq-Snbp6GjiNfyU3XsIlZnfiMpoiu8h5hfZ2o0V510r8kUuHdMJIflmb6fw3A4sW3Gp80ZDj0-5cWunC8A8wHSpzFKicM">Kitty Giraudel blogged in</a> with a solution involving <code>animation-timeline: scroll();</code> which I’m quite sure is just the kind of thing Andy was fishing for. But Kitty relied on some information from JavaScript:</p>
<blockquote><p>In CSS we can’t read <code>offsetTop</code> or <code>offsetHeight</code>, so we pass them from JavaScript as custom properties</p></blockquote>
<p>This isn’t illegal, of course.</p>
<blockquote><p>I think this is one of these things where some JavaScript is not only needed, but also probably quite important to craft a solution that makes fewer assumptions and work nicely in more flexible circumstances — even if still relying on scroll-driven animations.</p></blockquote>
<p>But certainly it’s fun to flex those muscles a little harder and see if there is a way. <a href="https://go.sparkpostmail2.com/f/a/X-psDjwryCidFUBU8ywvjA~~/AABEfhA~/YpU1Rk9-th_W9TN-RfEWd68R3cXHccAmU4Kzskw0RYt78nci2Nqs5-FEXkrYQEmdEMVAaG_bBRvTTmka2FULbfztOZ_QSiBNLWXnN3sqhuGE9uIwhGkZOjzTrLdegpBNsCxXpTMSsdJ612hPBX_OH_alvePHjfE-Or7znjhXHSk~">Roman Komarov jumped in</a> and used scroll-driven animations as well, but of the <code>animation-timeline: view();</code> type rather than <code>scroll()</code>. I think this is key as then we’ve unlocked information about the boxes position within the viewport that we wouldn’t have otherwise. I kinda love Roman’s solution as it doesn’t adjust individual <code>box-shadow</code> values at all, those just adjust from a shadow generally “pointed down” to “pointed up” and it interpolates between them. All the logic is tucked into the <code>animation-range</code> declaration.</p>
<p><a href="https://go.sparkpostmail2.com/f/a/kXV77R43ATOzeXuOTEwKEw~~/AABEfhA~/bS_Q0pjMp2qRLnJDVpxU-ZTJZjE-oMzVZREZGlrsFKLfM2Ap3bCxD_xNcVR2rE8xM6MSrUhGxh2mX6OZs6EtUMFpDWIna4XnZMw3ew3JriamjGqryY9kaan09tCnJkDed47XJkhtLcvvytTHc5k8-Q~~">There is a take where the box-shadow values are manipulated directly</a> with a <code>view()</code> scroll timeline though, from Chris Bolson. Each of the shadows properties are directly manipulated in the keyframe. Like others, this requires the custom properties to be <code>@property</code> delcared with a type so that the animation knows how to animate them. Chris’ approach is extra classy as it has this touch where the further away from the light source, the lighter the shadow, which feels great.</p>
<p>Chris Wachtman jumped in with some alternate takes based on the light source idea. Like what if the light source wasn’t a line, <a href="https://go.sparkpostmail2.com/f/a/eS2kFnorKtSrQtx2k1a4RA~~/AABEfhA~/77J9mLoZLKFVHlLX0Fpuhr6R3d01czIoNBxj8ifpF5iK9B5vQnfI-nV67wo4ceTphM5o8Uu0jWLlp3EQwVxV8O6zx1eUSPqmvObdzgypfMtTcSk5WFMXuSCtLlU5bdZuoeP_eHK0KjAx2pcWvYO4bQ~~">but instead your cursor turned into a little sun!</a></p>
<p>CSS is so cool. Kitty, Chris(es), Roman, you’re pretty cool too.</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Lato, system-ui, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#000000;">
<p class="subscription-details"> You can adjust your <a href="https://go.sparkpostmail2.com/f/a/rarrlK8mQDO-48Rml_mP6Q~~/AABEfhA~/SIet4PTPDQt6byGRSc9QARZqeAl4YIDIfDPu9B1KKckvYXlGZ6Apb0RU8o4GIVPjuZG-3bL3_Z_m5vVQeP0n5HkStPlD3-rdhjjlmLaBn2H8INs8Hu8RW5gRyv8R9GTOCWZkHybUj-t9Jv1H85_H1g~~"> email preferences </a> any time, or <a href="https://go.sparkpostmail2.com/f/a/Ka517DwHa0FLYtJHhDV1UA~~/AABEfhA~/AmhAVddPGkf8Urd6K09q1hj8T_bUcPQKVrU32OdhMBGVm8Y551EoXVL-xi5_nOfc2Gqz0wEXopr79FxQbmh8KJDQSGYXZA5C7gMsCRi4spzgJjc0OwhPHshbuSrHoOwEaEnHMtKVne56FGsKdi-67dHJTqCOFpM7gWWp6veNb5-0S1kFSqzK_t_R8p29RekNbjwmh_ANcluPVVNQ2-2mHoMya75aWDdoHmdC0cUYRZvrom1qtZ5iEWicXskEc1tIAE92QJnohGvNeNBFDCTtl0QNW2yLRcwqsoE9E6z8ecKxw8MtPwnYj7YE5XSGz3AliEqd7VvzQUvZmvWlRJyN0XIoFny9CUy5Bs1dVdIQ2HM~"> instantly opt out </a> of emails of this kind. Need help with anything? Hit up <a href="https://go.sparkpostmail2.com/f/a/vMO1HopDao3fum_T0JHB-A~~/AABEfhA~/0uQYo-5lICL01eiuszl1-tVu41TfdgvWTfU9IVNyGNAg5YoaWMmkqTuBhL-atysBBoHaDdm7Ll2WdSa76-8S7dUHRuL_60ZH5RN9jIEL2_DFh7h0btZzXBvb3JIqZ_Oz">support</a>. Interested in sponsoring? Here's our <a href="https://go.sparkpostmail2.com/f/a/KCxnUqDygqs4s2goYw5_Ag~~/AABEfhA~/qVakOfl2XPt3rhsCuf3czYmk_XvWyLry0YPZi4_Zq6VAoLHXUrJZ2ls-a8UY_9VB1Cgq7gKLfR9jzLSXuSrJeL3u57daMmy_YsmoT_hNLiL0Sa3A-WOhOd2v1XjhOjb1">sponsorship info</a>. </p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</div>
<img border="0" width="1" height="1" alt="" src="https://go.sparkpostmail2.com/q/0Dy4YPNJYiAQ-Nj5UpwY1g~~/AABEfhA~/Fmzz62MxS9i2qztE5rZPVRYFpDJMSzFXh8U2lbJ4bnSZNDufUh5EIvjIqjiVCS3BBEU4jlb7M0JT1Nx-kn02DQ~~">
</body>
</html>
