<!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/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap);
</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">
.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;
}
</style>
</head>
<body style="word-spacing:normal;background-color:white;">
<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/p5OHfFvyj6ncGHlaMZnA2g~~/AABEfhA~/oZxsGu0xLIagYQdhQ_py59iiqIHk3R9JBTlapg9gXC7gUppPfSGv1_uHQv45PIOPiBgmQRUNhBilC7cevanyAw~~" alt=""/></div>
<div style="background-color:white;">
<!--[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/special-edition-spark-header.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:16px;" 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:12px;line-height:1.5;text-align:center;color:#333333;"><a href="https://go.sparkpostmail2.com/f/a/eHfR435s4vxTmNMmXs3EsA~~/AABEfhA~/Gy_KKfqy7KTMW8HckpuiRtXl1zSWcwgNr0kpZsKSxrCpyLikf5lFPpjWxjulq2PVWUw5JIxBTjPjlVB_yKQR6hT2zSOe8cCUMW3TL0iAy5GoJbsg6TOS_MronMH4cHzb" class="view-on-web-link">View this issue on CodePen</a></div>
</td>
</tr>
<tr>
<td align="center" style="font-size:0px;padding:10px 25px;padding-top:10px;padding-right:35px;padding-bottom:0;padding-left:35px;word-break:break-word;">
<div style="font-family:Lato, system-ui, sans-serif;font-size:16px;line-height:1.2;text-align:center;color:#333333;">
<h1>The Most Hearted of 2025</h1>
</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;padding-top:0;padding-right:35px;padding-left:35px;word-break:break-word;">
<div style="font-family:Lato, system-ui, sans-serif;font-size:16px;line-height:1.5;text-align:left;color:#333333;">
<p> This edition of The CodePen Spark is sponsored by <a href="https://go.sparkpostmail2.com/f/a/D3OkxMI36zotO5iOLTv9BA~~/AABEfhA~/ZzYKxw-O96xIIA5naRfdLB97uORUOcvhkOOK1aNMNtcQsc0gUmVEXmjegOOeXT-6VrKEfRldWDoKSW8Y4J6yPvEXwLb6PbL5oPqbIBlqDRYQ4iNJCU33fmw0scGXQYfeilpGOZudixcZA8ky5MxoFUheevas1Hpmtfg-orzqNon8Yj2ByMQyflW10kz7UFFDJdfygX_aW-5JyQnzYFhCsoW_MOnD9xQxdPnkWzVW2DuW-yujaKJJ3mUZuNc3py9rwpxBD1RNGYxeKnaeeiTF-Q~~">AWS Marketplace</a>. Read their new free ebook and learn how to build faster, more resilient applications with cloud-native DevOps on AWS.</p>
<p><p>For this very special edition of The Spark, we're counting down the top 10 Pens from our annual Most Hearted list! You can see all 100 wonderful Pens and follow the creators in our <a href="https://go.sparkpostmail2.com/f/a/a8DU3J640VJKclYBatg1oQ~~/AABEfhA~/eevJo6y7-YFbw8yQqY5JfOy76kd8RWdvULIP2GmP4LpAIH91-TeLjUhXcMchJ9RGKQtsMLgQ9Pd9LRI4W7wwScZmyK3jNmbBtBECzEBbUGOS23Ayv05VZ-5jqVRBR5EBnjKIL84Df7jq6kbsINvJGw~~">Most Hearted 2025</a> gallery.</p>
</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" bgcolor="#f5f5f5" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#f5f5f5;background-color:#f5f5f5;margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#f5f5f5;background-color:#f5f5f5;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:#333333;"><a href="https://go.sparkpostmail2.com/f/a/D3OkxMI36zotO5iOLTv9BA~~/AABEfhA~/ZzYKxw-O96xIIA5naRfdLB97uORUOcvhkOOK1aNMNtcQsc0gUmVEXmjegOOeXT-6VrKEfRldWDoKSW8Y4J6yPvEXwLb6PbL5oPqbIBlqDRYQ4iNJCU33fmw0scGXQYfeilpGOZudixcZA8ky5MxoFUheevas1Hpmtfg-orzqNon8Yj2ByMQyflW10kz7UFFDJdfygX_aW-5JyQnzYFhCsoW_MOnD9xQxdPnkWzVW2DuW-yujaKJJ3mUZuNc3py9rwpxBD1RNGYxeKnaeeiTF-Q~~">
<img style="display: block; margin: 0 auto; width: 325px; box-shadow: rgba(17, 12, 46, 0.45) 0px 48px 100px 0px; border-radius: 10px;" width="100%" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/AWS_Marketplace_Q1-25_DevOps_Cloud-Native-Compilation-Ebook_ROI_Banners_REFRESH_011426-5p_600x600-1.png" />
</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:16px;line-height:1.5;text-align:left;color:#333333;">
<p> Modern application teams must move quickly while maintaining security and reliability. In this Amazon Web Services (AWS) ebook, learn how cloud-native DevOps practices on AWS help organizations modernize application development, improve deployment velocity, and deliver greater business value.</p>
<p>
<strong>You'll learn:</strong></p>
<ul>
<li>Modern development approaches for real-world use cases.</li>
<li>When and why to use purpose-built databases.</li>
<li>How to implement reliable continuous deployment.</li>
<li>How DevSecOps strengthens security and speed.</li>
</ul>
</div>
</td>
</tr>
<tr>
<td align="center" vertical-align="middle" style="font-size:0px;padding:10px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
<tbody>
<tr>
<td align="center" bgcolor="#fdf8c3" role="presentation" style="cursor:auto;mso-padding-alt:10px 25px;background:#fdf8c3;" valign="middle">
<a href="https://go.sparkpostmail2.com/f/a/D3OkxMI36zotO5iOLTv9BA~~/AABEfhA~/ZzYKxw-O96xIIA5naRfdLB97uORUOcvhkOOK1aNMNtcQsc0gUmVEXmjegOOeXT-6VrKEfRldWDoKSW8Y4J6yPvEXwLb6PbL5oPqbIBlqDRYQ4iNJCU33fmw0scGXQYfeilpGOZudixcZA8ky5MxoFUheevas1Hpmtfg-orzqNon8Yj2ByMQyflW10kz7UFFDJdfygX_aW-5JyQnzYFhCsoW_MOnD9xQxdPnkWzVW2DuW-yujaKJJ3mUZuNc3py9rwpxBD1RNGYxeKnaeeiTF-Q~~" style="display:inline-block;background:teal;color:white;font-family:Lato, system-ui, sans-serif;font-size:22px;font-weight:normal;line-height:1.5;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;" target="_blank"> Get Ebook </a>
</td>
</tr>
</tbody>
</table>
</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/QvBEqVctKDaEKsDM4HACZw~~/AABEfhA~/9pBJP1q8S9TIHahZliBe9x86SyVdW8OrAVlRaeGCrFt27-PhtiBqdjEx_Va2NoPbmGF2m9lvNDxJ5C05nX7sRFhX1dxexs7VybQtKwazgzWWINuYrNTpdflmuQiKulR_MRAagFOQXGZmlTjobcz-gg~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/dynamic-toggle-type-radio.png" alt="Dynamic Toggle with [type=radio] + :has()" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/QvBEqVctKDaEKsDM4HACZw~~/AABEfhA~/9pBJP1q8S9TIHahZliBe9x86SyVdW8OrAVlRaeGCrFt27-PhtiBqdjEx_Va2NoPbmGF2m9lvNDxJ5C05nX7sRFhX1dxexs7VybQtKwazgzWWINuYrNTpdflmuQiKulR_MRAagFOQXGZmlTjobcz-gg~~">Dynamic Toggle with [type=radio] + :has()</a></div>
<div class="spark-desc">At #10, Jhey Tompkins' stunning toggle within a toggle flexes the capabilities of CSS <code>:has()</code>.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/Q-2kVAoqmurrEsbNlk6vNg~~/AABEfhA~/HcYlDpJwLD4OAeRZX-jnvWm3g7RHGl3ItaVLXo5pDn7wA_kPmWVKtNM9C0vKYmUEXT1_C_0lGV05Ml_9buFuGUpFubCJFjfu6jxOFCXrqPBLYWKGboH7Dtb-oJeMjcdBMFqAJySCFp-mpabFt9WlbA~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/card-carousel-nidal.png" alt="Card Carousel" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/Q-2kVAoqmurrEsbNlk6vNg~~/AABEfhA~/HcYlDpJwLD4OAeRZX-jnvWm3g7RHGl3ItaVLXo5pDn7wA_kPmWVKtNM9C0vKYmUEXT1_C_0lGV05Ml_9buFuGUpFubCJFjfu6jxOFCXrqPBLYWKGboH7Dtb-oJeMjcdBMFqAJySCFp-mpabFt9WlbA~~">Card Carousel</a></div>
<div class="spark-desc">At #8, Nidal95 brings us a classic team carousel that's ready to get down to serious business.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/KEZGiUAMRNAU3KZTckAlJQ~~/AABEfhA~/CWiKkbjuWV0s5si_PxTOSJf2_C7DvAP5rO_BJ4bvJn_7rJMZPSve1GEZe_8BARwwPn7sx7r77NqQk1wrVLumJsFVZA2KcXbk5k5oLdtkTUuDaqZyoWF2HRcK7GjchaJcWXHpu4gbiS9lCpvq79dOBw~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/bubbles-background-animation.png" alt="Bubbles Background Animation" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/KEZGiUAMRNAU3KZTckAlJQ~~/AABEfhA~/CWiKkbjuWV0s5si_PxTOSJf2_C7DvAP5rO_BJ4bvJn_7rJMZPSve1GEZe_8BARwwPn7sx7r77NqQk1wrVLumJsFVZA2KcXbk5k5oLdtkTUuDaqZyoWF2HRcK7GjchaJcWXHpu4gbiS9lCpvq79dOBw~~">Bubbles Background Animation</a></div>
<div class="spark-desc">At #6, GlitchWorker shares a soothing bubbly CSS background animation, with fuzzy bubbles flowing and floating by.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/jTsBtWDp8R72wf117kLBTQ~~/AABEfhA~/X7CJPa2rONMU7sw_e-vw-2KhrffIknX687KsmNS8Qlq-r4DY550siI_ysADn1vqfg5dcnPo1M_Br0tbGLw2-sBl_LY2Q2TMQG2l_xykcci3eeCgMzHxmrX8vX0aKaQ-cgKNAc0mx2UNMMVQBwHby1A~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/electric-border-balint.png" alt="Electric Border" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/jTsBtWDp8R72wf117kLBTQ~~/AABEfhA~/X7CJPa2rONMU7sw_e-vw-2KhrffIknX687KsmNS8Qlq-r4DY550siI_ysADn1vqfg5dcnPo1M_Br0tbGLw2-sBl_LY2Q2TMQG2l_xykcci3eeCgMzHxmrX8vX0aKaQ-cgKNAc0mx2UNMMVQBwHby1A~~">Electric Border</a></div>
<div class="spark-desc">At #4, this sizzling SVG and CSS Pen from Bálint Ferenczy electrified the CodePen community! (Jhey <a href="https://go.sparkpostmail2.com/f/a/zJ3mMg5dlFvybNsm7jv8qQ~~/AABEfhA~/9pBJP1q8S9TIHahZliBe9x86SyVdW8OrAVlRaeGCrFvOPTiZkpsA0NRJtteDwI6R1wDWWtDuLTEJxC9GYybVYVO1toN8fuNRi8dbONHRkeezwFav-gGumd7EQ5Gw0-041Lf3Ttzbnw6luz9XSwQyfA~~">took a crack at it, too</a>).</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/JSVdOIPCDbmTorrT9BJF-A~~/AABEfhA~/fCRk-IOkzEtqLLTHA2LVwZ0kQeEGLC4-porSBG_CrcTemOW2tUV5BjYZt6NL-7AmH74y9bcpdumSmAPy-QwC7He7DYtCo37Xij9hrEeDSb9fE_77xr0wPldZZmKtF5GhUR6KC7xh9aEmVubW9HDTkA~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/card-beam-animation.png" alt="Card Beam Animation" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/JSVdOIPCDbmTorrT9BJF-A~~/AABEfhA~/fCRk-IOkzEtqLLTHA2LVwZ0kQeEGLC4-porSBG_CrcTemOW2tUV5BjYZt6NL-7AmH74y9bcpdumSmAPy-QwC7He7DYtCo37Xij9hrEeDSb9fE_77xr0wPldZZmKtF5GhUR6KC7xh9aEmVubW9HDTkA~~">Card Beam Animation</a></div>
<div class="spark-desc">At #2, blacklead-studio wowed us with "An experimental animation where cards slide through a glowing beam and transform into code. Inspired by the awesome Evervault visuals ✨"</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="pen">
<a href="https://go.sparkpostmail2.com/f/a/S_Er7XOpnJsJDlyWOuycbg~~/AABEfhA~/eevJo6y7-YFbw8yQqY5JfK4oc-35wIV6SM3pBqvfCE-oL_R_M7lbFVCMbksMJ_3KZlTh1u6UB3HiYtiKn74YySJJX48kuS1JtZ_DKKNoUSvpSq3agJBeg3J49B1PVW4Ga1cGLstdupMLAumh6EM_Zw~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/circular-animations-set2.png" alt="[javascript] ❍ Circular Animations Set N°2" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/S_Er7XOpnJsJDlyWOuycbg~~/AABEfhA~/eevJo6y7-YFbw8yQqY5JfK4oc-35wIV6SM3pBqvfCE-oL_R_M7lbFVCMbksMJ_3KZlTh1u6UB3HiYtiKn74YySJJX48kuS1JtZ_DKKNoUSvpSq3agJBeg3J49B1PVW4Ga1cGLstdupMLAumh6EM_Zw~~">[javascript] ❍ Circular Animations Set N°2</a></div>
<div class="spark-desc">You'll see a whole lot of Filip Zrnzevic in this year's top 100! His mesmerizing set of circular animations lands at #9. This Pen is part of a series — <a href="https://go.sparkpostmail2.com/f/a/NuRnN8UNLeX1TuzQ-X35zA~~/AABEfhA~/eevJo6y7-YFbw8yQqY5JfK4oc-35wIV6SM3pBqvfCE-VP-mrB3x1Z_40wugZP4dKSZY6RAxdyo39ENfWSHMTqbel-sF6XqQuZkqypNgF6ZKcbbVFxtJdb4H936yPXicXseLG4blfOcVuVGQkNZVP-w~~">N°1</a> also made the list, at #82.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/S9xrNCTF1p2aODOB9a2-pQ~~/AABEfhA~/9pBJP1q8S9TIHahZliBe9x86SyVdW8OrAVlRaeGCrFu6qnudoQax-E-N7BWz_tvFs489eiTQ7lT9oIFKy5IdIOZcR05ZQH3CUbAmn5OiBZt15NDYLrJO9GJqjOWdlQNNkOjwH88nCBQ37J1ldOKU4g~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/animated-hover-disclosures.png" alt="Animated Hover Disclosures" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/S9xrNCTF1p2aODOB9a2-pQ~~/AABEfhA~/9pBJP1q8S9TIHahZliBe9x86SyVdW8OrAVlRaeGCrFu6qnudoQax-E-N7BWz_tvFs489eiTQ7lT9oIFKy5IdIOZcR05ZQH3CUbAmn5OiBZt15NDYLrJO9GJqjOWdlQNNkOjwH88nCBQ37J1ldOKU4g~~">Animated Hover Disclosures</a></div>
<div class="spark-desc">Jhey Tompkins makes his second appearance in the top ten at #7, with this super satisfying set of smoothly-sliding cards. Use the theme switcher up top to try it out in light and dark modes.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/dLLMEGOAJzKanOXylMyyDg~~/AABEfhA~/Kai9Leh_uNzS2CP7GUdkh16DdJYqfHU_ro042YI09Io7NC_d-0JhQodgOu4BAOMAp5onfHSjyfB5JQwHN7dWUBizUP7x54trmY--olUrFbD0wLI2EHJbbnmN-3cMXzxYqnWK1fg-cRSHHXzU11qLLQ~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/glass-button-knoll.png" alt="Glass Button" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/dLLMEGOAJzKanOXylMyyDg~~/AABEfhA~/Kai9Leh_uNzS2CP7GUdkh16DdJYqfHU_ro042YI09Io7NC_d-0JhQodgOu4BAOMAp5onfHSjyfB5JQwHN7dWUBizUP7x54trmY--olUrFbD0wLI2EHJbbnmN-3cMXzxYqnWK1fg-cRSHHXzU11qLLQ~~">Glass Button</a></div>
<div class="spark-desc">Petr Knoll was really on to something when he dropped this glass button in February, well before the excitement around iOS liquid glass took off. Petr's delightfully glassy button lands at #5.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/dujERrxdiC2Pof5KhsoxOw~~/AABEfhA~/eevJo6y7-YFbw8yQqY5JfF5weWs2p9ZFvGAi3DkU1zPGXalXsnSRVr3LD3pkwiIkfpABOAbcfEbo5Fk3Q8XJCfPuXa61CyhsCVMI4csMXyjxT8q1M1fhW-XQgyLEcBe5il-mvCKFP5p4f5HD4GvZBg~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/tubes-cursor.png" alt="Tubes Cursor ((WebGL, WebGPU)" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/dujERrxdiC2Pof5KhsoxOw~~/AABEfhA~/eevJo6y7-YFbw8yQqY5JfF5weWs2p9ZFvGAi3DkU1zPGXalXsnSRVr3LD3pkwiIkfpABOAbcfEbo5Fk3Q8XJCfPuXa61CyhsCVMI4csMXyjxT8q1M1fhW-XQgyLEcBe5il-mvCKFP5p4f5HD4GvZBg~~">Tubes Cursor ((WebGL, WebGPU)</a></div>
<div class="spark-desc">At #3 the cursor magician Kevin Levron brings us beautiful, bendable light tubes "made with ThreeJS and can run with WebGPU or WebGL."</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/Ij1MvNbwrN2Vslt0HMmYtg~~/AABEfhA~/Kai9Leh_uNzS2CP7GUdkh6XLAAWXIeSSNjVPQqEJEhLQs6IyqfAzuteaUoakJxrKd0xEFqqj00HxxO5Uh09AqG5cZQewYMD4NIhZlYUTgTseSQofCY1ULbaGilXNXIvj-RZuU9mv0FW73Bq_xjRpkA~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/neon_glass_context_menu.jpeg" alt="Neon Glass Context Menu" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/Ij1MvNbwrN2Vslt0HMmYtg~~/AABEfhA~/Kai9Leh_uNzS2CP7GUdkh6XLAAWXIeSSNjVPQqEJEhLQs6IyqfAzuteaUoakJxrKd0xEFqqj00HxxO5Uh09AqG5cZQewYMD4NIhZlYUTgTseSQofCY1ULbaGilXNXIvj-RZuU9mv0FW73Bq_xjRpkA~~">Neon Glass Context Menu</a></div>
<div class="spark-desc">Congratulations simeydotme, you're #1! With inspiration from a design by <a href="https://go.sparkpostmail2.com/f/a/DGLu9rfuqj8I7AB7Tg0Rhg~~/AABEfhA~/eRv6JlBjMYBCk64evPzDmoDBf7Wtn63eMAP5osHIrx5ykMYpO2aDLfUpRT9Zcvmv7eqOkxVXeClLwz1llSTQlJFZOKGXJeGgVR09g8pDa7Po9Bx7SPdngcam0jfXSFeRYsgB7eLSDaInnoVzoGhtdy7_AoryO5aJ6sempbMjvZ8~">Andrea Montini
</a>, simeydotme created this customizable context menu using "CSS Variables to control two hues, and applying these hues as a border effects around a glass menu. Some advanced techniques with filters and blending to create the electric-pop effect."</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>
<h3>Two Liners</h3>
<p>The real <em>reason</em> that fancy modern CSS is exciting is because of what we can now <em>actually</em> do in CSS.</p>
<p>I remember one of my favorite dudes Hakim El Hattab made a thing called “Progress Nav” <em>ten years ago</em>. The idea is a Table of Contents component that could tell where you are scrolled in the page and reflects that in the design of the ToC. (<a href="https://go.sparkpostmail2.com/f/a/D7l0oUvxpLqr7C66u_7yGw~~/AABEfhA~/l1fw4eDILqOnEtISjXFw64qKaQj9rjodxJJLDA5BC_bSJzjjTC61BPVak59Ts5W4rjJVx_MuxiyAk5yBbKixqXt0_ewm8u3rI0UgUI1bjVW3SAP4sH5nW6WAgVFwH2uwo7OP1BsyY-YTW8w_lp8R_OkH2VKgbSPFT2eFb3n1lZYXTYGz7HRTLkrJNZngYHBrzCsQ0XZ3swHrDF2Y8Bl5og~~">See GIF</a>)</p>
<p>Perhaps you won’t be surprised that functionality works via JavaScript. It’s not <a href="https://go.sparkpostmail2.com/f/a/fk2ouWISUUtES_3yvoDaGA~~/AABEfhA~/_IiZzHXYzLjprfG6P60MnXPIEQ9ISN-muEkEyOEmj5oA_nRIEySeE-IqzbFyuFUBRc59IS7Ovj12SwAR6q_XDXpPY1zRzbi0A65Z0QM4NC1gHA_YZmUmhrSzyS8O57sZ_S__kSxQFGD4nPRJrZxIQUsTgagIFRxRHQ_hreifj3iPAs91I_EAbyZhDox7Ygp1">horridly huge or complex</a>, but, it does rely on totally-not-even-debounced <code>window.addEventListener( 'scroll', ...</code> which is known to be a cause of janky performance.</p>
<p>But it’s cool, right?!</p>
<p>This kind of thing has been come to be known as a “scroll spy” effect. I’m sure you can see where I’m going with this: <a href="https://go.sparkpostmail2.com/f/a/k-qf5c13VghO_HGyi2FZWA~~/AABEfhA~/9pBJP1q8S9TIHahZliBe93qCbjFYgI4IzL_79IVrX2Wkq6z2aHuxJxcfkjS4mXgPmRVyXRrP7jVMCbFEoSnwQL41322sdEwCmjYHuBuuEo9vsBMHEl3bksxbCLfqd-34SNRrFwgrmh_17mDwXD4VGA~~">CSS can do scroll spy now</a>. In Chrome anyway. Remember when all that <a href="https://go.sparkpostmail2.com/f/a/1x6IGqU9tQGAQhVP2pcXGA~~/AABEfhA~/mvpYvqPZzpoqxtTWMt_hvS2nhM0my7wmvz71eNBggjnOHADBuQLgBwbF6xdUNiortjoh0tkRf_hsz0apVFNU7sux4s8zzqUOFKiBXPyoA07_4Y0NEs-j4iiPU8B_BrtMsRwsR-nsbEQh3vdnw--hudZ0GXTId6OEF3u918hV-S8~">CSS carousel</a> stuff was happening? This is highly related. I remember people gently trying to say <em>this isn’t just CSS carousels, it’s interesting CSS primitives that combined can make a carousel, but totally have other users too.</em> Well, here’s something.</p>
<p><a href="https://go.sparkpostmail2.com/f/a/k-qf5c13VghO_HGyi2FZWA~~/AABEfhA~/9pBJP1q8S9TIHahZliBe93qCbjFYgI4IzL_79IVrX2Wkq6z2aHuxJxcfkjS4mXgPmRVyXRrP7jVMCbFEoSnwQL41322sdEwCmjYHuBuuEo9vsBMHEl3bksxbCLfqd-34SNRrFwgrmh_17mDwXD4VGA~~">Una’s blog post is a live demo of it working.</a></p>
<p>Here’s the main CSS that does it:</p>
<pre><code class="css">.parent {
scroll-target-group: auto;
}
:target-current {
/* styles for active anchor */
}
</code></pre>
<p>Wow.</p>
<hr />
<p>It’s also obviously ultra important that we <a href="https://go.sparkpostmail2.com/f/a/EN36KwIYWaAnWnrEND8low~~/AABEfhA~/sybyF7k0crQIGf-_6KFFmcEQpZ6nHViS2SvGMJHAyryX7M2Ts0wSKOui0oo55RVNbKafmPi83prjFeJEZJSUYNF53lWwZYf2xO8XOvX1ThsI8TAs8wbWUxXFLiVPduWlKdNaWywiufBdO71WbvtmZWkBRxbiHEYdDX9cmK348JAV1Qjlmg6XCVG3CxI5KT5E">can do Battlestar Galactica corners</a>, as Dave explains:</p>
<blockquote><p>… the sci-fi film and television trope where all rectangles (doors, windows, furniture, user-interfaces) have one to three angular corners instead of all corners being the old, boring, un-futuristic 90º rectangle corners. They are the cooler version of rectangles by all accounts.</p></blockquote>
<p>Another two-liner 😍:</p>
<pre><code class="css">.sci-fi {
border-start-end-radius: 50px;
corner-shape: bevel;
}
</code></pre>
<img src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/galactica_paper.png" alt="A Battlestar Galactica cut-corners effect created with CSS corner-shape. " width="450"/>
<hr />
<p>You know when an element moves when View Transitions are used? They say “they aren’t screenshots” used during the moving/morphing… but… they kinda feel like they are screenshots. And so, sometimes it looks awkward. <a href="https://go.sparkpostmail2.com/f/a/Xl7dnf2Xj_WerEWJbxI3CQ~~/AABEfhA~/WHvQmXwkY55XV3uXWcI86aSK67LHZ4sP0WhW8e766HQKeGOnSBhuF64is4AxhPVo2G4safecGCRlQqF14KusgATA9yudEgdGbemlGSJxrt5PljtFospZPSMpywLbjT9ephWWuTm0pGlimrqPoAF9GPPlR1LOitYmd2yc3HgqGdk~">Bramus notes that an example of this is when an element has a different border-radius</a>. Fixing this is more complicated than I’d like it to be and showcases how sometimes these fancy features require a pretty deep dive once you get into the details. The good news is there is <a href="https://go.sparkpostmail2.com/f/a/Z4R9gLxwIZe5yk-h-Pg21A~~/AABEfhA~/TX-7vEXEkxwa917LzLFUi1ZydjYtjq1IcHi62BwfuKAx_zAszFN5uls4Cc0Cx28ntWTvVe9atXuHsIprIiRIafsiPxgHqQ9O1g8giem5pLZD3OGLn9Dt0a-T50jUpNwj-cK1aVej7Mu1wXzCfQya2MwbOjw1J-m_S6fHNEZD4d2JpxlopuUAZ5Azd3gjQ3xR">a (slightly) simpler approach</a>, which requires thinking about the individual parts you are actually animating. That part, thankfully, makes sense to me. Like giving the element itself and the guts of it different names:</p>
<pre><code class="css">.card {
view-transition-name: card;
}
.card > .card-content {
view-transition-name: card-content;
}
</code></pre>
<hr />
<p>I’ll leave you with a beast of <a href="https://go.sparkpostmail2.com/f/a/klvhbFelOpcxnos7sA-uqQ~~/AABEfhA~/RxALrO6slJr8_zLMRLScWfOUdZz_DG3w4WqFuj1vC5xyQzzmLNilJt3eQZ07Mt8PiRRd7mmRVXLjrZQ0kld37aZTtxUFbhbxVr4zMudQ6Wyo80rtk810e1PLjczUkwuIKdJdB6zqfBEiQLJfNIi5EiX0hn5RQDhr4eu9epeq6LE~">a Julia Micocene blog post about lighting in 3D CSS</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><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/XsiMu4SqzMf5pnNvgYyzvQ~~/AABEfhA~/Kai9Leh_uNzS2CP7GUdkh_pzERzk-qwN-APDwyMNKEeAR4VwmyeIWqRV3C9thr1tDWHNeoDoSZApKjDarDxNZJ85hDY0hF2y_w9NC_ztQ7hrVMMmBW937pl1X1AMPzzLGLJHbg4yDSXmtNvIfHv1Zw~~"> email preferences </a> any time, or <a href="https://go.sparkpostmail2.com/f/a/s0ds-PycKgb-Vy_JfgFBqw~~/AABEfhA~/uMK5EsOA8pYNRr2boJ3nvEmfn7xVARANX7MpcrMb1PPbkuM_eMfQIt3trafW1fbNM6cC_l3t22QmcBUJ3ZkX1zDxzMBWc5PY9vJauteMquR7CGEpqL6nPJ8bl0XOlfycV15qXTOn2Pz4fvgx5HQpsKi0PD1gyuu3NKpc0z3LtAjfTV4qz4mPtxuGAqvOu47EsFhNGWfjzfoPGgMeKKkTIaWact0yboMKvw5-7AcB72qbU4Of-sLSlotfkyn04WYZoYBVww6XcdxnNPwl8NGXYF17FVXo-8fCt8M14UFTllUkFQPOItrQBjJiHpthmSBA_8XxM231zutDzWUMkGkpguBVaGg6T2TpoOi7KNCh0Uk~"> instantly opt out </a> of emails of this kind. Need help with anything? Hit up <a href="https://go.sparkpostmail2.com/f/a/vRXEz3oYIGy3XjR55a2Ukg~~/AABEfhA~/Q4cNPwbDDZVsze29jkzQewopHH2EnsBDQyVxDGYAl6VKVBfKx0dJV0cUllH4tG8PBWveoKWM96yro5m8pNPwfPivTTesen0cWI0XQMTTfeFQWcMhonsIb9VXwWgPdObi">support</a>. Interested in sponsoring? Here's our <a href="https://go.sparkpostmail2.com/f/a/GOmtUCPr6SICI8I9X3M5pQ~~/AABEfhA~/Gy_KKfqy7KTMW8HckpuiRjAqzsWQGgh2z2vQhfqFZ4swNn7h86hyFIGKDWkKRRWFPODDfIdr_P0hXpp44AQSNk6bWqe36MBB4vru9b58ci9ympDpY-JAqqCOxMAye0qK">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>
</body>
</html>
<img border="0" width="1" height="1" alt="" src="https://go.sparkpostmail2.com/q/aJCmw-7EWUQLrRjhlhOO9A~~/AABEfhA~/Q1RUBSah_bcfqz5HWpAXYA90su6bZGJ1w6TbJjqNcQu5hQ-nDgJkX_OEaUZ7exs-BLsDgscFDH1NcmkB6xj5LQ~~">
