<!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/TVmDJPBl8CUQAUpyLZO5mA~~/AABEfhA~/AlIgw2bHvx-P55kS_DeeyBcGgP3YW0jEBzMNcvyrg6uUMhqqzaez8HUkcYKH4IXDF3eXvpl3jtwjJRmPb7rXLw~~" 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/YCK90gqUJ4LKEVufrEu6pA~~/AABEfhA~/97ObGxVfCcsusUkR1Yx5vBsqd_m0B5rGcc32KcGJ1-BUer3Gq5mqQo0jC8E_1YDgVtYTq8KQjOpDA7nM3HbcPoxFR75kXHT0224ef8Eqr22O8oK0LVE20DYuFqA2HQyA" 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;">Expanding Galleries, JS Physics, and Pure CSS Carousels</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>Today's CodePen community highlights include an expanding photo gallery with architectural edges from Chris Bolson, an exploration of JavaScript physics from Sabo Sugi, and a jaw-dropping CSS carousel from Una Kravets.</p>
<p>Plus, Julian Garnier shows us a little Anime.js chemistry, and Pedro Ondiviela brings us back to neumorphism principles.</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/AtVvo3DSQoGJkeeVfatLXA~~/AABEfhA~/wYrlzrCFCK7_ChrEg_MjygY6R6-gagPt1kg2JK33yJSi_WgK3b9k3nadrhHO2wxpVEEshIGp5z-wO0dUe2flPhJhPABZBazJqQlwXlnfs9u347bnRg1BNjH0hfCcMEPbPWiJZ3S0dW5Xhguc24pQoA~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/expanding-gallery-corner-shape.png" alt="Expanding gallery using corner-shape:notch" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/AtVvo3DSQoGJkeeVfatLXA~~/AABEfhA~/wYrlzrCFCK7_ChrEg_MjygY6R6-gagPt1kg2JK33yJSi_WgK3b9k3nadrhHO2wxpVEEshIGp5z-wO0dUe2flPhJhPABZBazJqQlwXlnfs9u347bnRg1BNjH0hfCcMEPbPWiJZ3S0dW5Xhguc24pQoA~~">Expanding gallery using corner-shape:notch</a></div>
<div class="spark-desc">Chris Bolson uses <code>corner-shape: notch</code> to carve out some architectural detail for this photo gallery that expands each image on hover.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/WU8jUD3VjhI3G9VoQoktHQ~~/AABEfhA~/OqqyvD0Y8TqvrQgCnwk65dv1WFOGkaOsShlq1AK8W0ZRwMcYovafJtNdZoJ-D-C0RJG96E3mi6HwM2dki6SNrvFXQvN-2IiV_8AIlySrqfiZHGHf532W-yDoJXJ82lnQtdH6_SjnW059dmdjfOGvbA~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/css-3d-letters-punch.png" alt="3D CSS letters + punch hole effect" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/WU8jUD3VjhI3G9VoQoktHQ~~/AABEfhA~/OqqyvD0Y8TqvrQgCnwk65dv1WFOGkaOsShlq1AK8W0ZRwMcYovafJtNdZoJ-D-C0RJG96E3mi6HwM2dki6SNrvFXQvN-2IiV_8AIlySrqfiZHGHf532W-yDoJXJ82lnQtdH6_SjnW059dmdjfOGvbA~~">3D CSS letters + punch hole effect</a></div>
<div class="spark-desc">Spin around the world and check out the punched-out texture on the flipside of the letter when you hover over the globe in this Pen from David Aerne. Pop open the <a href="https://go.sparkpostmail2.com/f/a/_Oghweb8ZnNv9gWIucBLfQ~~/AABEfhA~/ydtgcsNJMH1JvPUX9ABL1ITateCSQtrJMhHlKWgjn0Jt0IeqGnjKbeXr8MXhgHmybluLHTCDOOYFMZ70GOJgE72Jz5zWJdBjhMw6yAxBKEnQm4MfSJzZ7jN8zL1RwunXz1KmfR3uLXjl0znE8J7iC_qevCrflNc18k06QJleiAY~">SlideVars</a> up top to play around with the controls and colors.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/S2obnxEHNJEq8Z1ydc8j4w~~/AABEfhA~/nnDVv4QYcX52rpCnyBdPnmyBxVkMddeo5xDIhEAT0GzT5LR3DjnGmpGKFMalTArwxzxBIiU-uQhBKOGs5Qr66t3YQHykwW8NEKYZO4bZBrqx_P13CMlBDpVIsh9qk8uv45JU22ovQOWh-dJ9UDlNvg~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/scaling-letter-toggle.png" alt="Scaling Letter Toggle" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/S2obnxEHNJEq8Z1ydc8j4w~~/AABEfhA~/nnDVv4QYcX52rpCnyBdPnmyBxVkMddeo5xDIhEAT0GzT5LR3DjnGmpGKFMalTArwxzxBIiU-uQhBKOGs5Qr66t3YQHykwW8NEKYZO4bZBrqx_P13CMlBDpVIsh9qk8uv45JU22ovQOWh-dJ9UDlNvg~~">Scaling Letter Toggle</a></div>
<div class="spark-desc">"A toggle switch concept in which a vertical switch is used as an O for On and Off. The letters next to the switch enlarge or shrink depending on the state." From Jon Kantner.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/bXpAA_sOK2mvQJWQZYKiOg~~/AABEfhA~/SJMzkk7wXYnXse0EV5l2CXbOPQBTJH6PM9m9-aiY_1fP5548dItSA2h1XoWvO8n5OGe8sCAfcjuK1UDuh_-VPtmffFgcmgo6aZ-Nj4obxo8LAEhcozgTTVN5bcEBoKxqMqEOV-vo2EVsMwlbBQzQIQ~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/neumorphism-principles.png" alt="Neumorphism Principles" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/bXpAA_sOK2mvQJWQZYKiOg~~/AABEfhA~/SJMzkk7wXYnXse0EV5l2CXbOPQBTJH6PM9m9-aiY_1fP5548dItSA2h1XoWvO8n5OGe8sCAfcjuK1UDuh_-VPtmffFgcmgo6aZ-Nj4obxo8LAEhcozgTTVN5bcEBoKxqMqEOV-vo2EVsMwlbBQzQIQ~~">Neumorphism Principles</a></div>
<div class="spark-desc">Pedro Ondiviela shares "Simple examples on how to reproduce up/down and up-down effects for neumorphism designs" with CSS.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/RW4UFo2mAf4KS0gSLUMdxw~~/AABEfhA~/4JPXIevnroxaq1DabXrYfhoclN3RwTIo8Q24gOR-K5gPPZ0UIGcOHbqsaymEiUt1K8nken0lxQRn4EB513zreSaEhYqQJ-Cd0kNUZw1MYmTvP69R8KJSBoNIbaW-wA00v97rbw8XBoHoXffkolDCRg~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/torus-glass-munoz.png" alt="Torus Glass" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/RW4UFo2mAf4KS0gSLUMdxw~~/AABEfhA~/4JPXIevnroxaq1DabXrYfhoclN3RwTIo8Q24gOR-K5gPPZ0UIGcOHbqsaymEiUt1K8nken0lxQRn4EB513zreSaEhYqQJ-Cd0kNUZw1MYmTvP69R8KJSBoNIbaW-wA00v97rbw8XBoHoXffkolDCRg~~">Torus Glass</a></div>
<div class="spark-desc">Daniel Muñoz shares a delightfully distorted view of text under a spinning donut of Three.js glass. Watch what happens when you change the parameters in the control menu up top!</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/eszWh6HJZejNJe5EuBFmIg~~/AABEfhA~/1hCPtXnu_7MUdANrkUKZPOt3xPqFhpSIUDq2Ch4q9PiCywBUmIJrdeHDKyxHYRpttMysZlYR4OX_qcY0e63qFpeGD5_Mx0ZhinBxhlFv4Z2JDFO7dJUKgqS7-6ZMZwlYLMCoxD9KY6d8AV6cmZq3ebhGr0-6DQToT4LpDzfrsqghHSPjQBFPFmDazJ1YnM1K5J1XmdZQDCf3bfyxxZxA66TpZZd0_Y3iz2kcwQryYjK8PkgafIWOyp8rGfIwGxH4QQaBk-csxADrUjQTIlBfoQ~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/aws_12626.png" alt="Modernize development and scale securely on AWS" height="" width="260" />
</a>
<div class="spark-item-type">sponsor</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/eszWh6HJZejNJe5EuBFmIg~~/AABEfhA~/1hCPtXnu_7MUdANrkUKZPOt3xPqFhpSIUDq2Ch4q9PiCywBUmIJrdeHDKyxHYRpttMysZlYR4OX_qcY0e63qFpeGD5_Mx0ZhinBxhlFv4Z2JDFO7dJUKgqS7-6ZMZwlYLMCoxD9KY6d8AV6cmZq3ebhGr0-6DQToT4LpDzfrsqghHSPjQBFPFmDazJ1YnM1K5J1XmdZQDCf3bfyxxZxA66TpZZd0_Y3iz2kcwQryYjK8PkgafIWOyp8rGfIwGxH4QQaBk-csxADrUjQTIlBfoQ~~">Modernize development and scale securely on AWS</a></div>
<div class="spark-desc">Modern application teams must move quickly while maintaining security and reliability. In this AWS ebook, learn how cloud-native DevOps practices on AWS help organizations modernize application development, improve deployment velocity, and deliver greater business value.</div>
</div>
<div class="spark-item" data-type="collection">
<a href="https://go.sparkpostmail2.com/f/a/n0ovoDs2m0-9WA-vmX_zXg~~/AABEfhA~/ptulrCR16ZzePPt-DoNm1NDNYYU7t5Pq9eQo0YuXb7JFHD1kTCTsbq4ADa3mX6vJXTZqfjWk59o8z9ehej1kErTb-DM0aVrqndy3wBbQ8i3loL_Bcc9gBX4Fhl0lMwJdneREVTL6gTRt7Oz70ov72Q~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/cpc-puzzle-play-col.png" alt="#CodePenChallenge: Puzzle Play" height="" width="260" />
</a>
<div class="spark-item-type">collection</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/n0ovoDs2m0-9WA-vmX_zXg~~/AABEfhA~/ptulrCR16ZzePPt-DoNm1NDNYYU7t5Pq9eQo0YuXb7JFHD1kTCTsbq4ADa3mX6vJXTZqfjWk59o8z9ehej1kErTb-DM0aVrqndy3wBbQ8i3loL_Bcc9gBX4Fhl0lMwJdneREVTL6gTRt7Oz70ov72Q~~">#CodePenChallenge: Puzzle Play</a></div>
<div class="spark-desc">In week three of our gaming-inspired challenge, we played with puzzles. Check out our collection, including Pens by <a href="https://go.sparkpostmail2.com/f/a/0yrA6hDZ8CTnhPlajRMB9A~~/AABEfhA~/n21faS98G3QUH7SCcZ3dnLfLffwSQJIuVwznKfmUfj-5XmmXjK9KSstIwc5ZXiXGUSNk8knZ6MHMg08lZbA5FggJDNxRnWL-kbqWLZcFKljR13l_ARTJtQTxHgzreNe7qPXSVztkEHAAeVn-AFwpgA~~">CalculateQuick</a>, <a href="https://go.sparkpostmail2.com/f/a/J14rNybEBhGGzth8yt7h8A~~/AABEfhA~/wYrlzrCFCK7_ChrEg_MjyvbICJYuiKCOQQTH7HdxrU--c_qxw0b3TGhyWlNNzdDiBHhHpqfBDeslM0bWJ_nbqwno2ofnLYLWiiktY-gzpBI2o42pvk0nnixsIw4DkwEaE-Gv6TZbcBXNtYLRhrSA-Q~~">Megafry</a>, <a href="https://go.sparkpostmail2.com/f/a/RsKMwOabvRUEa9UfRye48g~~/AABEfhA~/nnDVv4QYcX52rpCnyBdPnpoXaQi1qbNE6vTReWR6dpTKqwAqXAaFSnVD1MSzu_Al-w7H7dR_NrTiHt9RMq1wjMXpe2hgO1jrIpiwEJFPpF_Z2oDSsHgHZwSB2uIB2UYkGqspCqSqFNYA3QVo5JGlJQ~~">Giedr-Ju</a>, and <a href="https://go.sparkpostmail2.com/f/a/r2YkVKgUmezU41ymJzfZLQ~~/AABEfhA~/vfEV5Q35DbOTNjIG7Fn2dq3vwpBcCgBEp2xioh72xOiuM5h40CHynqa8UeUhO_3eL3QquKhnky4q7NFTToFSZN38EOHNdhKQXfjcqdCQBZORYyARL2Xi2a6eDEc0-IyKC1C7YiHsstdXXy8lLtBUZA~~">ikrprojects</a>. Want to get in on the game? <a href="https://go.sparkpostmail2.com/f/a/R8ua83XAuGnGBexBN_7lJA~~/AABEfhA~/oHfyLskWjdP_kapMKI7sGrZ2l-HVNDlDwVR3JkMtcHLEnbkptXPuqjyappa45DtA_sYDivAzUsNGlxFr1_wZ0rPtR2v9AyS748DFvMlqr-wVygSyN1bj3k8TVb33XUJDjMxVKlbkggLkOno7_n6QNw~~">The final week of the January challenge is on now</a>.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/98Sf46eXwDMmjSChxeGIQQ~~/AABEfhA~/nnDVv4QYcX52rpCnyBdPnsEd0ROx5s8kI0LOtrulAgGfeRIpKUyZAEb8r0vjuCfuBs-zUX3QyCanXiPPnAZ4UAXfcc-G2fjzrF7GIOO5xDdmor8fddbty54BC083xZw0nRivRPw3T8ytxWWQM7MgHg~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/physics-of-wires-js.png" alt="Physics of Wires - JavaScript" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/98Sf46eXwDMmjSChxeGIQQ~~/AABEfhA~/nnDVv4QYcX52rpCnyBdPnsEd0ROx5s8kI0LOtrulAgGfeRIpKUyZAEb8r0vjuCfuBs-zUX3QyCanXiPPnAZ4UAXfcc-G2fjzrF7GIOO5xDdmor8fddbty54BC083xZw0nRivRPw3T8ytxWWQM7MgHg~~">Physics of Wires - JavaScript</a></div>
<div class="spark-desc">Drag the medallion around the screen and watch how the delicate wires attached to it react in this exploration of 2D JavaScript physics from Sabo Sugi.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/IUchiuicMkh87_pDEh3IBA~~/AABEfhA~/StRoxsMA92jBi8yLEOhSIzJI0mRRPJshTWJBWb_aLgdYrA55No6X37XGo3OgUGadqZjA_AQMAt6hQ2J_g4irkUStPkeOKkXbcPybu2Nubrg3YXehvNleIkqmUDCYOmuXKH8i_itLSh7Ws2vUJUoS8A~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/no-js-carousel-shoe-una.png" alt="No-JS Carousel, Shoe Store" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/IUchiuicMkh87_pDEh3IBA~~/AABEfhA~/StRoxsMA92jBi8yLEOhSIzJI0mRRPJshTWJBWb_aLgdYrA55No6X37XGo3OgUGadqZjA_AQMAt6hQ2J_g4irkUStPkeOKkXbcPybu2Nubrg3YXehvNleIkqmUDCYOmuXKH8i_itLSh7Ws2vUJUoS8A~~">No-JS Carousel, Shoe Store</a></div>
<div class="spark-desc">Swipe through the carousel and flip the cards over for details in this stunning pure CSS Pen from Una Kravets, inspired by a design by <a href="https://go.sparkpostmail2.com/f/a/BilM60KoO1rGC50UU9s5ng~~/AABEfhA~/ydtgcsNJMH1JvPUX9ABL1BVTeHn-gabMo4uBH9EJJl_HNPLY6WXeIyFxxtn8H25Pb7gxpR8xyKdu375NLALBDHJf7v7CJqXvI-_VtpUqFGld3iXnF4_KiPH3Vh9W7q4_YlzJRH1KiVzXiaNPqa0Et4Q4QXLDSKvs4MiYllQDVCE~">ThominoDesign</a>.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/rbb3RZn8_JFYwLMcgqZ8MQ~~/AABEfhA~/oHfyLskWjdP_kapMKI7sGgjNRBFAV10P2pqqK_EwZzrvNHRwUtu_JZ4p-sAUMIDGzE2z6gPAHeXUQce_R7H3OYcQpGvroHIbQRDPllCk0i7lon5u8ubm80AOzfgKTgsG_q-kYsOtw47QiNYKXDz8CQ~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/anime-js-periodic-table.png" alt="Anime.js Periodic Table Auto Layout Animation" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/rbb3RZn8_JFYwLMcgqZ8MQ~~/AABEfhA~/oHfyLskWjdP_kapMKI7sGgjNRBFAV10P2pqqK_EwZzrvNHRwUtu_JZ4p-sAUMIDGzE2z6gPAHeXUQce_R7H3OYcQpGvroHIbQRDPllCk0i7lon5u8ubm80AOzfgKTgsG_q-kYsOtw47QiNYKXDz8CQ~~">Anime.js Periodic Table Auto Layout Animation</a></div>
<div class="spark-desc">Julian Garnier demonstrates his <a href="https://go.sparkpostmail2.com/f/a/yWrQU_TH1lXVcB5z4yvFMA~~/AABEfhA~/THT60V8Px2E72mEvqWWZy1zfVhAvlKFQN-K9O7KCIqs32tLt55FcKigxx6saq2LPWCGi14F88T7sbm_XJSeorlqt4U8khB3-c_leHj5Z6Ma6ZLGqoK00qeKcFhS1GTcq">Anime.js engine</a> with this unique display ot the periodic table. Press the buttons to morph it.</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>Type</h3>
<p>Have you seen Kiel Danger Mutschelknaus’ <a href="https://go.sparkpostmail2.com/f/a/KiRf5BwyxE8B5f3uvd5vcw~~/AABEfhA~/ptulrCR16ZzePPt-DoNm1I6mbVdRjcpvBkYDE9AW7gq7Mwm0xms0yWdg9-m90KajaHLEuIOcNsWa8Fyc5SU8SFJ7aziW3qe2-NKi3VNhk38278ZXD_c_LazHjnmbS_54eT8b0PEEVCxGOv-heCBF-A~~">Space Type Generator</a>? This thing is absolute monster of amazing text-on-<code><canvas></code> effects. <a href="https://go.sparkpostmail2.com/f/a/nUhUztphFI9Dh-ywVLkZEA~~/AABEfhA~/TKmTdGi1k52E4oQgMWp0G2Va33YK5g_9m7uK8oNLMNMoFk8Tzvqh3DwchpwN10FQHeEpgNNP8KMV9ekly9kGn4XrqnDtFxdyUONj6gbDbR-kUr54SZy4F2QHePvKRrv9">Bought a coffee</a> for this beautiful bit of work for sure.</p>
<p>The effect you see when landing on that homepage is extremely cool. Playing around with the sliders and presets make for almost entirely different demos, each more amazing than the last.</p>
<img src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/hoops_corner_1.png" alt="Spiraling hoops of text from the Space Type Generator. " width="200"/>
<p>But don’t miss the <strong>Select</strong>… menu in the upper right which has another ~20 effects (!!!). If you’re like me, each new one you open is the new best one.</p>
<img src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/codepen-rules-corner2.png" alt="The words 'CodePen Rules', distorted with a pixel-bending effect. " width="350"/>
<p>Well fine now that we’re doing type, I gotta empty my pockets with cool type I’ve saved lately.</p>
<h3><a href="https://go.sparkpostmail2.com/f/a/TqI5eWYYxZKAiizJtEn6jw~~/AABEfhA~/wxby4u_B7eTeCZTfAkqo4XqIhmun0E6sW7sKwIiueZ-gI9XS2e7kTE7XcFxkkBIlA9Jrzke33GaaCa6-N3gLXykL5V7J0OmZWGbrgNuiZE8bjKm2ox7FCKwma1oeniEWA1qijatSQf4yS7M2rU5ITCgTZ9VYASAMxJA7ZvDK2Pk~">Swiss Cheese Mono</a></h3>
<p>I like that the font was made by hand, but then… “After taking some photos of real cheese, playing around with Adobe Firefly’s generative AI image tools” you can make it look like, ya know, real Swiss Cheese.</p>
<img src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/swiss_cheese_corner3.jpeg" alt="Swiss Cheese Mono typeface specimen. " width="250"/>
<img src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/swiss_cheese_corner4.jpeg" alt="Swiss Cheese Mono, altered to look more cheesy." width="250"/>
<h3><a href="https://go.sparkpostmail2.com/f/a/oCEOcbgXN3mtWvYR91_0AA~~/AABEfhA~/5FuToeTbgIQDIqgVenZVLBu7qu_eTfD0XBZ0ts7Ydb0qSdDObE8a1dRwCizzanCDqiVDVPlhLJIE3euDsKXk05K7vgh2OQql2ssOZKWjatx8O9ksB_UeuXDFFPSycl7xjdvCICNdL06sZUAKq2gPsQ~~">Fran Sans</a></h3>
<p>This is a great story to go along with a great font. I love it when people get the bug on something, and other people pop in to give them the right tools and ideas at the right time to complete the journey.</p>
<img src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/fran_sans_corner5.png" alt="Fran Sans typeface specimen. " width="350"/>
<h3><a href="https://go.sparkpostmail2.com/f/a/SYQy0nCRdfmAAMMBHrAJWg~~/AABEfhA~/upY_2mpdWsOXiBkBekT60NWG2bOUfLTXLiNvIBSYEHgncWFXaBQBjYSZ5wHl_M-awCVIMSV7nPxhfBN2XoABxze79j6xPEHedUK5PaF4O2IqwtREH0wOyqg0i8xpYaPinRuNLchF6PFsc-47496Yww~~">Shop Sans</a></h3>
<p>Ya know, I don’t believe I’ve ever met a font with this express purpose.</p>
<blockquote><p>Shop Sans is a typeface for setting text on circles and curved text paths. Its ‘Curve’ variable font enables adjustments to optimize details for bending type smoothly with an adjustable radius.</p></blockquote>
<img src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/shop_sans_corner6.png" alt="Shop Sans typeface specimen. " width="350"/>
<h3><a href="https://go.sparkpostmail2.com/f/a/D0nEtMxLahorEugrbCgcIg~~/AABEfhA~/5tcI42TaRn78wM2mmBtr5sEU20z3mBYiu-syVdMhhp2li3I5EZAs9ZTyfcRDJEXF-XK3O7GQNSUbleM3TVVlHlsQC7o-xO_S5AMo4Lup9lggJeJg-v2HMGLD3wgRG7LK4ZcCUDp0mld3Kn28ENgq2-ZZS6Yagkng1NeF7umIiHDeTt7s-fqeif6XI9dRO7UC-MCPo8YVLAld2F4Ie-MhUR6o-l1RPNSL5YYVgCQzHTu55nNrOaWXg9eSZM4eICgP-zKgZX5cxi9QN84KiP0Z33RltsUFs_7cywPHUeniTw4~">Miles To Go</a></h3>
<p>I’m <em>almost</em> annoyed with this font because I think I “liked” it on Instagram and it now the image below follows me to the ends of the Earth. But it’s just so fun! And it’s only $17!</p>
<img src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/miles_to_go_corner7.jpeg" alt="Miles to Go typeface specimen. " width="350"/>
<h3><a href="https://go.sparkpostmail2.com/f/a/DCdWwkKUXMEtg5m8D42cdA~~/AABEfhA~/oHfyLskWjdP_kapMKI7sGlgDtfA4v36AVOCrNusg8RFb2DRMzCiVfMR5KvzLL7vPJJ7bxYyKR1B_gIC-j--OWy2VOJz39aXit1uBaXgu2ujM53supTQRb9Wh7U92lWTKP-Li8E5SLSFCZgR6cMrJEg~~">Clauthbound</a></h3>
<p>Another new one from Dan Cederholm, also very affordable.</p>
<img src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/clauthbound_corner8.png" alt="" width="350"/>
<hr />
<p>I’ll leave you with <a href="https://go.sparkpostmail2.com/f/a/hHRV2qhDh17VJnistUBbYQ~~/AABEfhA~/oHfyLskWjdP_kapMKI7sGnusxWN9PgPF-ry8l402OOGjFuJPX1Gj5ZIScPHYoI1hpCdY9Cri53KHwms0repB_ygdVt09RUTln7nIwon5ac4am7S-c-ULoeCRNEHXGRLbAG2kEQUfcWpunONXviPG-A~~">Tobias Frere-Jones’ account of the typeface Gotham</a>. I put Gotham on a pedestal in my mind somehow. It’s the the ultimate modern <em>very good typeface</em>. It’s popular, but not so popular I ever got sick of it. It’s just an absolute workhorse that when it works, it’s perfect (like in Obama’s campaign). I still associate the font with “Hoefler & Frere-Jones” in my mind, but that partnership is long over, and the font stayed with the company “Hoefler & Co”, which still exists I guess but is now part of Monotype. I like that Tobias wants to make sure the story has a proper URL.</p>
<blockquote><p>As these families are now further removed from their origin, I want to ensure that their stories are accurately recorded.</p></blockquote>
</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/anhKGvWE4uo7sl8wYbPcoQ~~/AABEfhA~/upY_2mpdWsOXiBkBekT60BPViyKXkbUPkNk_eV2RwUjimAuNzQ80VqPfXx5coZHCnNilGdGKKNoKGWgrAZffpGN2TNe7xiDXwUejBNKp6lCfTJQ2goQow0Grh14YqLFXEp0tfqz-XZ0RFZhAEElV1Q~~"> email preferences </a> any time, or <a href="https://go.sparkpostmail2.com/f/a/lPc9O3yZVDilBseyqp2UIA~~/AABEfhA~/p5TIgp34uBDOVpcf_O4h5V6nyTxNRImGk-eogUCW7-bTnWyakQEYWyeNISq0JdDjqIkVsqB8z2O9jh7BU_v-LJh_1mDBjstR947j6le-OJ4ZkzyG-j6RolYzNxPbP4A6nnkl1pXkAqZW0SmjBcxowjSumQ9KS9sb-mN45OH_We9ArbNX7ayygRocudfMbo_tX5w9lNZtFbA8U_NANJcj12STa9HCLK0UvCMkTuj1DJm6WFZUzxRZoEFEfz6XPx5vmS9ufHdYTs0RMhL97T6HZk2lngqSONpQ-gTfxwDgh4MpFJPVjFSAwrgqyLugggRoCQ5nWY83Vu9WvHnDP6Zz8yEUUTOtj1ftZY4cbUdObgY~"> instantly opt out </a> of emails of this kind. Need help with anything? Hit up <a href="https://go.sparkpostmail2.com/f/a/7VosLaZ8oXo5hLd3ud947Q~~/AABEfhA~/a1ni0srvGgDwZfNeYek85yzuG6miyfMJ-WWrMPgzYnD37AAWuU9tELUIeD6VFoLjhubfRLGrO3VHK1c-4cHmaAYhBH78DPkvI99hBaVyKF0IYM_lPNUsMY-m5JUJAzsG">support</a>. Interested in sponsoring? Here's our <a href="https://go.sparkpostmail2.com/f/a/vAPkp7WS2aUoguB-kxGAZw~~/AABEfhA~/97ObGxVfCcsusUkR1Yx5vASprq1PQv5G4WuFafhLRzVtrROAPN7fZsuPNskkmaiHYKFSCWPdUdHLpvz_uhxktKz4fRCYfKz5CrU6Rg-7D3-fAzfHyb4AqAAuLL0REdaI">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/iEyNvF_Hg1UdzOy2OMofoA~~/AABEfhA~/XiW701jqR6AoiOWysmsi8XI76qTSegu9W95bu7aeKR665Md8r9IY10X6AtQze6mah9K6k9BnaqEByNSFpPUexQ~~">
</body>
</html>
