<!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/MoGdzC0NVfPiEnn8vxhC6A~~/AABEfhA~/rkYoYAOD52Fgivma7MVIm3jCawnJKCNVichxRML3Q2bbyWRQGAbNaJq70B4oMpv1AhKXd7yYIoiAJ4KYd65t6w~~" 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/_Ww5v3MtJmgWQMQW4_-thA~~/AABEfhA~/R8VgIu7kW3KZYg_oQk-muGXVythZ77NUg9dvxorMropSTPxGCqoPY54bhW134EEOE6TF0DF01XCC2tX1v1sK4FYmMbgNBZ2ND-UHvfmzahAExYKXo59e4OWpv5ws43xW" 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;">border-shape, Graph Theory in CSS, and Aerodynamic Type</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 a look at what border-shape can do with Una Kravets, a stunning demonstration of graph theory in pure CSS from Temani Afif, and a playful example of typographic aerodynamics from mike-at-redspace.</p>
<p>Plus, Sabo Sugi brings us a meditative Three.js scene with a flock of songbirds, and the CodePen challenge community gets into mixing and blending colors.</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/mAD-6-RyDYrXWz0CgpPK1g~~/AABEfhA~/2PU9g2kYZ_wX07d6VSNMQ3RIn_iJQkvTMvR-EVopkN37BwAeypWk1xBJfHcBjUoKfUxALDRMgYFvannrhEhPC5nNpCe6Ed6G2kp4SfkwprATxemvxW_l2HDnrkRWZ9Zv2u5wYWn0OiO7Td0tI4NWNA~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/aerodynamic-typography.png" alt="Aerodynamic Typography" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/mAD-6-RyDYrXWz0CgpPK1g~~/AABEfhA~/2PU9g2kYZ_wX07d6VSNMQ3RIn_iJQkvTMvR-EVopkN37BwAeypWk1xBJfHcBjUoKfUxALDRMgYFvannrhEhPC5nNpCe6Ed6G2kp4SfkwprATxemvxW_l2HDnrkRWZ9Zv2u5wYWn0OiO7Td0tI4NWNA~~">Aerodynamic Typography</a></div>
<div class="spark-desc">Control the fan with your mousewheel and watch the letters fly and bounce off the walls in this fun Matter.js Pen from mike-at-redspace.</div>
</div>
<div class="spark-item" data-type="collection">
<a href="https://go.sparkpostmail2.com/f/a/E-zzueXUi4S7i3TWfhGvJA~~/AABEfhA~/aZQhh8MlLqD57lXbsHe5BI6XYZ_6cu_iMPG7xolMAXrRwGI2r6XMxEXJuYlwWdOdnxNQVbnanJpgJLOY7c7GuU8ebd7QE63QH-FEjSI_chxuWfpQI9FZHPe3YvSiTAguYGDOQ5cLIroj6gcD-bScQA~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/cpc-mix-blend-coll.png" alt="CodePen Challenge: Mix or Blend Colors" height="" width="260" />
</a>
<div class="spark-item-type">collection</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/E-zzueXUi4S7i3TWfhGvJA~~/AABEfhA~/aZQhh8MlLqD57lXbsHe5BI6XYZ_6cu_iMPG7xolMAXrRwGI2r6XMxEXJuYlwWdOdnxNQVbnanJpgJLOY7c7GuU8ebd7QE63QH-FEjSI_chxuWfpQI9FZHPe3YvSiTAguYGDOQ5cLIroj6gcD-bScQA~~">CodePen Challenge: Mix or Blend Colors</a></div>
<div class="spark-desc">Week three of February's "Color" challenge was all about mixing and blending colors. Check out the collection, including Pens by <a href="https://go.sparkpostmail2.com/f/a/3haoS7jYOTii3DyQFCvcXA~~/AABEfhA~/mtJNLvcgJJ_qS4fCGRF_Y3SNhqByLnh2q2P6AojMnrgVBAU-IAJR4EwWMiPSLtRkaX3fA7-KItIFMFzMeMFQaRzaiFJo1Chhl3hzdwqX24D-b6e6XM1wYnqO_-UypEs49jeeI8ujU17HlAz6kPo0Pw~~">Giedre Ju</a>, <a href="https://go.sparkpostmail2.com/f/a/V5JSixdl4JYTgBYkjp901Q~~/AABEfhA~/2dthdnsT1zfEtAAPkG20ksptIICT_wsIrSIS5dFFsuJq4Z5kEdn3nm0kRPqITQgsY_AUxU3Ttj3A8OcQH48lDflEHDqSQ_IIyxCOsjTuKek2_y9AB7KwLVEYVSLdpiZfA0v59wk5cVgh7a9KXH9-eQ~~">Hola Soy Malva</a>, <a href="https://go.sparkpostmail2.com/f/a/ek1KcrxLCn_kNViOZsDqBQ~~/AABEfhA~/mtJNLvcgJJ_qS4fCGRF_YwxF197GqO0saB41Vehvl_Ulf4BV_diqqzuOSiXHs87-G5N1K5bUTeqBXkaP2mxzK_e_xn2juc-moMNd1y1cwF8355hqzdRqZqSCPZiukk6O1XpDcAxefnAZtw5r3Seu1w~~">Toc</a>, and <a href="https://go.sparkpostmail2.com/f/a/5-bG-aqxc2ivNzYv0nCAIQ~~/AABEfhA~/mtJNLvcgJJ_qS4fCGRF_Y95S0pO7zcI8AxY2R_POfUf4cc1ySapjJJ01yY3SW1QsZedfMDPfCCNQXUtZx93HxHhHlkZfUGzlb7kelq4llzocCedaLoRsGyzxAFKdQEAXIXLr8wOInk3JUgTiolYAoQ~~">Sonny Koh</a>. Want to get in the mix before the challenge ends? <a href="https://go.sparkpostmail2.com/f/a/E0TTRZsV0D9-NQBeNJYsig~~/AABEfhA~/AId7ao9pSra1qllp91fjbNPvraBPAQzatPFMptvCnCB0Md8Th7nqGkebnjLl48bwEm4CvLaLXGF-SGUD9bVZbgfymUlbupBzvpnxN3E79r0PtGnWx9mZKbD_URdydNc36b_y57kOfOxDyCCVrJulRQ~~">Week four starts today!</a></div>
</div>
<div class="spark-item" data-type="sponsor">
<a href="https://go.sparkpostmail2.com/f/a/Fi0vjRz7Vcnm8ve08JVjtw~~/AABEfhA~/P6Yi5B-UrBN3hJpqMU99KiG4U5YEvLdbcgNrOm7VT5nHh7-UaPH2D6Sr0z0qiLJ_3NKjD8d7EjcJcbCM8uwPXEWq4Hwqp9hx8SdwHYftfFd24jcKPNoCpLUEF2C6NLdnWm4NvsW49GxP2wRdKnLOVQzU-ABMTrcp6MOOMTBYc3ENtHxnmClqNP79Gu8J3bAQl1dEA_7VEg4k186Ub7-YPLit0ZfO_Z6YJFHQikj_quq_01Vpb1WAgTRfM6zsE2vL5NaoEoHCr5yZUpowuT6FnA~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/deque_feb_23_2026.png" alt="Build accessible products" height="" width="260" />
</a>
<div class="spark-item-type">sponsor</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/Fi0vjRz7Vcnm8ve08JVjtw~~/AABEfhA~/P6Yi5B-UrBN3hJpqMU99KiG4U5YEvLdbcgNrOm7VT5nHh7-UaPH2D6Sr0z0qiLJ_3NKjD8d7EjcJcbCM8uwPXEWq4Hwqp9hx8SdwHYftfFd24jcKPNoCpLUEF2C6NLdnWm4NvsW49GxP2wRdKnLOVQzU-ABMTrcp6MOOMTBYc3ENtHxnmClqNP79Gu8J3bAQl1dEA_7VEg4k186Ub7-YPLit0ZfO_Z6YJFHQikj_quq_01Vpb1WAgTRfM6zsE2vL5NaoEoHCr5yZUpowuT6FnA~~">Build accessible products</a></div>
<div class="spark-desc">Join Deque, thousands of developers, and industry experts from around the globe to advance accessibility, swap insights, and explore the latest tools and technologies. Watch live, access on-demand recordings, and gain new skills to build more accessible products.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/dJ8gdbytYvRqMxCIjiFokA~~/AABEfhA~/nxE-ZV4p6_ZSMsh8fqF-kcvsDMgCuo4UHlGymVVYwN9rXDtA9V_Nz9iwur1Fzw9LxRG3rMtlD-u4_DZBh8gxShpuPlOS3BW0QrWyDOB6IrrSONrKzX7YpNXPPBZQz7o6pXSI_wv9XDgRoS5pKHqqIA~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/rybitten-svg-color-sphere.png" alt="RYBitten SVG Color Sphere" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/dJ8gdbytYvRqMxCIjiFokA~~/AABEfhA~/nxE-ZV4p6_ZSMsh8fqF-kcvsDMgCuo4UHlGymVVYwN9rXDtA9V_Nz9iwur1Fzw9LxRG3rMtlD-u4_DZBh8gxShpuPlOS3BW0QrWyDOB6IrrSONrKzX7YpNXPPBZQz7o6pXSI_wv9XDgRoS5pKHqqIA~~">RYBitten SVG Color Sphere</a></div>
<div class="spark-desc">The CodePen community's king of color David Aerne is back with this gorgeous interactive compendium of noteworthy and historic color palettes ranging from the 18th century to the present day.</div>
</div>
<div class="spark-item" data-type="link">
<a href="https://go.sparkpostmail2.com/f/a/LHv_LMkWFcfEanwHvSeBng~~/AABEfhA~/ueXpdxWDhkh-EboSSkMskQnFqoqPQtES1HzcaIMZaEQruBiAEuYVLZmW78wQR5drG9yzL3I9b-iKMAe_oQRKyC2g_NxivNNxWhldTInRNRtfjaRPoZaCmzV9AeI5e_Ak">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/scalloped-border.jpeg" alt="border-shape: the future of the non-rectangular web" height="" width="260" />
</a>
<div class="spark-item-type">link</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/LHv_LMkWFcfEanwHvSeBng~~/AABEfhA~/ueXpdxWDhkh-EboSSkMskQnFqoqPQtES1HzcaIMZaEQruBiAEuYVLZmW78wQR5drG9yzL3I9b-iKMAe_oQRKyC2g_NxivNNxWhldTInRNRtfjaRPoZaCmzV9AeI5e_Ak">border-shape: the future of the non-rectangular web</a></div>
<div class="spark-desc">Una Kravets demonstrates the potential of <code>border-shape</code> a "powerful upcoming CSS primitive that defines a custom shape for an element’s border". Demos include tooltips, chevron menus, and a playful photo border that used to only be doable with the wacky slice-and-dice of <code>border-image</code>.</div>
</div>
<div class="spark-item" data-type="link">
<a href="https://go.sparkpostmail2.com/f/a/T_o6Ix-7XKjkRl2ohE24qw~~/AABEfhA~/DSf6gRyNRqh1cwohrgNiFQDTtaFv_7hYSIvB5qrg5uA37KdXScaA4K2-8FElfC4WWQkDAXQhYFCnDbS31DEBxgXmSlchFqqmRKQ0N6zSsSFTHQwVyIjHF5D-2F7pTrrY_Y2KTljYLwbM01QEZzdPXA~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/graph-theory-afif.png" alt="Graph Theory using Modern CSS" height="" width="260" />
</a>
<div class="spark-item-type">link</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/T_o6Ix-7XKjkRl2ohE24qw~~/AABEfhA~/DSf6gRyNRqh1cwohrgNiFQDTtaFv_7hYSIvB5qrg5uA37KdXScaA4K2-8FElfC4WWQkDAXQhYFCnDbS31DEBxgXmSlchFqqmRKQ0N6zSsSFTHQwVyIjHF5D-2F7pTrrY_Y2KTljYLwbM01QEZzdPXA~~">Graph Theory using Modern CSS</a></div>
<div class="spark-desc">Temani Afif dazzles with this Chrome-only experiment that bends CSS mathematics to its limit. "In graph theory, there are algorithms that find the shortest path between two nodes. I made one with pure CSS (including the graph drawing). Drag the nodes, and the shortest path will update in real-time!"</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/079msQRKHrHF-FdR0mX9Eg~~/AABEfhA~/P6Yi5B-UrBN3hJpqMU99KiG4U5YEvLdbcgNrOm7VT5nHh7-UaPH2D6Sr0z0qiLJ_Lz9l_c-VkS7VWp3xOWvaLJT3t32B9ovFmv8tHSJPC4nmh0AcKVQDPwyXAODSRWJdh1bGw7SsIgEpC1TNJXLuuOQ9Gk-P8s5PfFrRMj6cEaWr0U4Ld95NqIMIGQGcMiPXL5G4YxdelGks8MaJ6M358PWbKoGCw0urtxhhqZ-RWVlQgOKcsatk4arS4Pke_aMJxO8sXZQFijV0fArnj6Of3w~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/aws_feb_23_2026.png" alt="Modernize development, deploy with confidence, 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/079msQRKHrHF-FdR0mX9Eg~~/AABEfhA~/P6Yi5B-UrBN3hJpqMU99KiG4U5YEvLdbcgNrOm7VT5nHh7-UaPH2D6Sr0z0qiLJ_Lz9l_c-VkS7VWp3xOWvaLJT3t32B9ovFmv8tHSJPC4nmh0AcKVQDPwyXAODSRWJdh1bGw7SsIgEpC1TNJXLuuOQ9Gk-P8s5PfFrRMj6cEaWr0U4Ld95NqIMIGQGcMiPXL5G4YxdelGks8MaJ6M358PWbKoGCw0urtxhhqZ-RWVlQgOKcsatk4arS4Pke_aMJxO8sXZQFijV0fArnj6Of3w~~">Modernize development, deploy with confidence, and scale securely on AWS</a></div>
<div class="spark-desc">Application teams must move quickly while maintaining security a& reliability. In this Amazon Web Services ebook, learn how cloud-native DevOps practices on AWS help organizations modernize application development, improve deployment velocity, & deliver greater business value.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/aDXHfxOc5MZ03U5iOk_fAA~~/AABEfhA~/mtJNLvcgJJ_qS4fCGRF_Y_AUZILsAHYNVQuqk0_7bTsD_XwY1PugLdE4zTJIcyoeE3C6P3MFX_5kUk_PBS1hAJWxVYxMrdadUTVPVvZIfNYqhFw9Gl4TqqoODAlcVdonKo0DYN8xKPfx7NQ4Pt1JQA~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/swipe-to-delete-notifs-kantner.png" alt="Swipe-to-Delete Notifications" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/aDXHfxOc5MZ03U5iOk_fAA~~/AABEfhA~/mtJNLvcgJJ_qS4fCGRF_Y_AUZILsAHYNVQuqk0_7bTsD_XwY1PugLdE4zTJIcyoeE3C6P3MFX_5kUk_PBS1hAJWxVYxMrdadUTVPVvZIfNYqhFw9Gl4TqqoODAlcVdonKo0DYN8xKPfx7NQ4Pt1JQA~~">Swipe-to-Delete Notifications</a></div>
<div class="spark-desc">Jon Kantner's "notifications with swipe deletion made functional in React" features stylish light and dark modes and multi-phase swipe options.</div>
</div>
<div class="spark-item" data-type="collection">
<a href="https://go.sparkpostmail2.com/f/a/TvT71_3IzwoNOWvaNcMnpA~~/AABEfhA~/aZQhh8MlLqD57lXbsHe5BI6XYZ_6cu_iMPG7xolMAXpXZb_CQV2Vyfzj_dbTgWK7D5odE1ZWftyj7n9EFcujQnxR_Rucz8etGdewdTpXXF7ahbPcAJQMI0oSwM2drGI-SBnNo-O-48uzvWO9YXdm_w~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/text-effects-ondiviela.png" alt="Text Effects" height="" width="260" />
</a>
<div class="spark-item-type">collection</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/TvT71_3IzwoNOWvaNcMnpA~~/AABEfhA~/aZQhh8MlLqD57lXbsHe5BI6XYZ_6cu_iMPG7xolMAXpXZb_CQV2Vyfzj_dbTgWK7D5odE1ZWftyj7n9EFcujQnxR_Rucz8etGdewdTpXXF7ahbPcAJQMI0oSwM2drGI-SBnNo-O-48uzvWO9YXdm_w~~">Text Effects</a></div>
<div class="spark-desc">Pedro Ondiviela shares a collection of bold SVG filter and CSS text effects. Each one is <a href="https://go.sparkpostmail2.com/f/a/zuxo_3XsIr2ZYGsNk4joJg~~/AABEfhA~/ledkSmsBkB6vppBac7mvbzqxYCnTnlTjIvW5Q0aGfcLLpZvjCPlpnltPLuz5dKwfGWteTGOtCIs2n5KH1UDZs0zFdm0cEsRwLC_ZjKziYp8boSRK-YeSyCJRcezAkW3r9fsifPPgDRcK4uQw2BtRFSsm-V-Mliuh0QnMs7tHpHrsLHLAJ8WGHs1ZVAAaszSblZcr8QqX_5K22ikqsI5qNQ~~"><code>contenteditable</code></a> so you can try them out with your own text.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/GSatg2NtKv04c5u5Nm_ljw~~/AABEfhA~/mtJNLvcgJJ_qS4fCGRF_Y-JsprP5kW5hn6QSCBGOY_CQSPdT9jtd-YmZZ69ATR5zQ8sJ5ivlq5TxD-u4E7bj7dUz87sPqzJDkqZLZ2kQYoCqggM31810ZSBbKuQse6VneEaqEhjoc2RXOInQiOPCKw~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/flood-above-the-floor.png" alt="Flood Above the Floor" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/GSatg2NtKv04c5u5Nm_ljw~~/AABEfhA~/mtJNLvcgJJ_qS4fCGRF_Y-JsprP5kW5hn6QSCBGOY_CQSPdT9jtd-YmZZ69ATR5zQ8sJ5ivlq5TxD-u4E7bj7dUz87sPqzJDkqZLZ2kQYoCqggM31810ZSBbKuQse6VneEaqEhjoc2RXOInQiOPCKw~~">Flood Above the Floor</a></div>
<div class="spark-desc">Step into this Three.js scene from Wakana Y.K. and you'll find yourself ankle deep in water in an elegant room. Spin around to explore and/or ponder how much water damage all those fine finishings are taking.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/x0u7qX7VQr8ESrKJobWpDg~~/AABEfhA~/hhjdBHdQ_l-vKkRlpAA_xT9p8BqbIWFo3njAydk8cEh4R0N8PJlLcPjr84HcS1M_ny1auL4qJpL7douuKuvFJAbj5KtfmcyJHMza-wMLuoUZ-GjNDw9Z_fbOa8RbZoVjY3QPlTPNidcdbIOCNAZy9w~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/bevels-hover-glow-card-tudor.png" alt="Sliding border glow on hover for beveled cards" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/x0u7qX7VQr8ESrKJobWpDg~~/AABEfhA~/hhjdBHdQ_l-vKkRlpAA_xT9p8BqbIWFo3njAydk8cEh4R0N8PJlLcPjr84HcS1M_ny1auL4qJpL7douuKuvFJAbj5KtfmcyJHMza-wMLuoUZ-GjNDw9Z_fbOa8RbZoVjY3QPlTPNidcdbIOCNAZy9w~~">Sliding border glow on hover for beveled cards</a></div>
<div class="spark-desc">Ana Tudor answers a <a href="https://go.sparkpostmail2.com/f/a/KTbF_Wh5wsYQuDsiMdZJUw~~/AABEfhA~/Cfhuna48JRBndktvfZJGzOy8norekUngW-3DhhnYJQGlUTALgh_g8tYkbnj-R8FJq6DdANxvIbAMQ5bK7gNDhu_A-MTl3ghgGb597D46QLX1gXUNyneUwqwGpYQBu9w4kR7l53SNLi5DgR9U2WldT1zUzxV5g8i9RElwZC2CZws~">Reddit question</a> with a masterclass in modern CSS with <code>corner-shape</code> and <code>background-clip</code>, <em>and</em> fallbacks for browsers that don't support them yet. Check out Ana's generously-commented code for details on how it was done.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/tZXd1Y9NeCiUA7fQH-jSYA~~/AABEfhA~/mtJNLvcgJJ_qS4fCGRF_Y1XWA56bdJw6K4IGTfQbLC1RNi6hO6byUL_7awO9B4OKfL223KGt-xA7g1JCSVGhFSrQHGmKHiHDLfz1Ve1DOhqWY8l0UIjOxswBm0n86vYAGimp_s9c2yMHhXzJNbn84Q~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/birds-follow-cursor-3d-sound.png" alt="Birds Follow Cursor with 3D Sound" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/tZXd1Y9NeCiUA7fQH-jSYA~~/AABEfhA~/mtJNLvcgJJ_qS4fCGRF_Y1XWA56bdJw6K4IGTfQbLC1RNi6hO6byUL_7awO9B4OKfL223KGt-xA7g1JCSVGhFSrQHGmKHiHDLfz1Ve1DOhqWY8l0UIjOxswBm0n86vYAGimp_s9c2yMHhXzJNbn84Q~~">Birds Follow Cursor with 3D Sound</a></div>
<div class="spark-desc">Click the screen and move your cursor to guide a murmuration of birds and listen to the peaceful sounds of birdsong in this beautiful Three.js scene from Sabo Sugi.</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>SVG Tools</h3>
<p>You can kinda smell a vibe-coded app these days. <a href="https://go.sparkpostmail2.com/f/a/p3JBvkkyExNIm-pd9_EHfg~~/AABEfhA~/OwGKQUYThHfVl-SEdhs4jvWEoPWiw-deIhYON8hFJG0itrbW4Uzt7WwBB9SJ32SzKA3Qa8PRbZTuO5NilFURWYKuubnqNJy1OUMnEdypNdYYpMOBzsmPmre1UwL9WdkK">TypingSVG</a> has that odor, but like… in a good way? An app like this absolutely <em>should</em> exist. Someone needed it, and how instead of it just being some little tool they’ve tucked away for themselves or thrown away, they tossed it up on some inexpensive hosting and now we all have it.</p>
<p>I give it some text and a variety of options and it produces an SVG file with a typing animation on it. Like this: <a href="https://go.sparkpostmail2.com/f/a/3fXlnb0hjDKwfiojS_rzeQ~~/AABEfhA~/NRg40jp-DSGelmPhOusmx5rcT4-gkovyWfawt7GGqsUG_J92nRvOXMg8ocaJ-IVZjXT7B9Y7ZnQKOLIn6dSwVIMkC5NDw0_fFZfFYl_LPv9W1GSTzXWIoqHVRofAlOC1_aq0LVR44yNDufV6V_2j-aMZQOS1JWqVL-TO40eia7o~">view GIF</a></p>
<p><a href="https://go.sparkpostmail2.com/f/a/3fXlnb0hjDKwfiojS_rzeQ~~/AABEfhA~/NRg40jp-DSGelmPhOusmx5rcT4-gkovyWfawt7GGqsUG_J92nRvOXMg8ocaJ-IVZjXT7B9Y7ZnQKOLIn6dSwVIMkC5NDw0_fFZfFYl_LPv9W1GSTzXWIoqHVRofAlOC1_aq0LVR44yNDufV6V_2j-aMZQOS1JWqVL-TO40eia7o~">This animated SVG</a> will work even as an <code><img></code>, which might be news to some. They’ll let you hotlink the image (so it works with query params, essentially), but I’ve uploaded it to our own site for longevity.</p>
<p>Why does it look vibe-coded? Involvement of purple. Vercel subdomain. Random dark mode for no particular reason. Very simple componentry with box shadows around everything. I suspect this look will just be a funny blip in time, as I’m already noticing a new fancier aesthetic emerge from Claude Code that uses their <a href="https://go.sparkpostmail2.com/f/a/DbPD-xOuS2Ci7e6Jd4iu5A~~/AABEfhA~/WMqWxYAJwNaBORaclLNXr_ko8M9j1Y88WL1BSVJno3fcSB3b2B39dSkxhvyxxG9I1oUS8q1sIHSGE-nHaD7-Q7msOxpfAygSgYdIPJqUddTSFjOAcgq2kdbf1rMsgutznRp2XOii4JVenNAS5GZMXSSx3xCq8wMhfH_d-SWqiG8MXx4MR_MRbrY6LdKiFuXC">Front-end Design Skill</a> that involves kinda classy all-caps headers and footers with more exotic font choices.</p>
<hr />
<p>OK I guess we’re doing SVG now, so here we go.</p>
<p>I don’t know if <a href="https://go.sparkpostmail2.com/f/a/Ud5NowD8I76bVR48w2fQ2w~~/AABEfhA~/ueXpdxWDhkh-EboSSkMskQY0hKR26gUa5vBtlO_01Zx7u-FNGvmUnOyv5olAgrX4fMNGWSITMK8FKo2_Hb7BZdpWP1pgycPQbmOnW-pp5hAg56lQXsRIl-TJ8_6PrgTU">Stroke</a> is vibe-coded, but maybe! There is one where you draw (kinda begs for a signature), and then it animates where you just drew (drawed?).</p>
<img src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/stroke_example.png" alt="'Codepen' written in digital cursive. " width="450"/>
<p>I’m not embedding this one as animated because it actually gives you a React component with a pretty hefty dependency (<a href="https://go.sparkpostmail2.com/f/a/tYn7I32gmg10twlCmYhQhA~~/AABEfhA~/OwGKQUYThHfVl-SEdhs4ju80wvA2QToxMHhJtNAhsVDFKxqQZs9bTZTBRtjKvRZv-DczazZUDtzc42YdkguhX6Ik66ynHeFK8gPxy9YnB6eknqu8njkvBtLIMtqrSlq_">Motion</a>). It’s a neat tool, but I find that a bummer, as I don’t think React or Motion is required for this to work, and it would be a lot more usable with some simple built-in styles or a web component with props to control it.</p>
<hr />
<p><a href="https://go.sparkpostmail2.com/f/a/CvKGBIAegtsOvMlnGHANwA~~/AABEfhA~/NNfScCs8EUgLgyTQA74ljafGzFRBmESKJyF1Zg0yEgcIu6c9AP1kZMsd_00B4lHXazvkn4UyObCN7aLnU5XRynbwdW6YCi_D1tIsdQWjvoRX10Yo9Pzbaq7_-Wzu-_1q">SVG Doodles</a>: <em>“Browse a curated collection of free, customizable SVG doodles and icons to use in your websites, apps, slides, and prints.”</em></p>
<img src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/svg_doodles_demo.png" alt="A sampling of the SVG doodles. " width="450"/>
<hr />
<p><a href="https://go.sparkpostmail2.com/f/a/7f0YBidvVZym3LH-Zr2H6A~~/AABEfhA~/aTZv9SxQR8_Mo66N07M32myMZX3DZbOqINQ9xxbhqp40ffqYNVO83zKE5zfmDO8uld-o8kDaZmkWSmwG80TzTZCqhiifOfljrK87EP-UmOAySmB8QMWPa8NEchr2bUUmLs9TTS8Kr5YDTdGVD9kF2ywxuwCGpiQlNRLqgjrR8ic~">You can <em>almost</em> use the straight-up SVG syntax</a> directly in CSS (like as a background-image), which is very satisfying. You do have to URL encode a handful of characters. You aren’t gonna get syntax highlighting though. I’d have a stronger urge for CSS to make this even nicer, but <a href="https://go.sparkpostmail2.com/f/a/vNoht4FwD6ijej1Lj-5MmQ~~/AABEfhA~/LN-FkDOEWE5T7Y4vmZRzTKBsZtgYrmPbQNHlVuqdqNIywnzvBS7rKQNOuVaXp0EuKLz2K8oQrqDq0IX3nMMeDrmxwCj3j6Vzs0YXjhbpaIDKs4ee-z-HaPq6bw1-Ql3s1uwTKyI97ZA5IGJSzU8AZxYPyrusupl-5exVFW9E2xtQ_19qZG1GQzesa97ELT1ZWG760OXqp4irlPcZcTXK3A~~"><code>shape()</code></a> quells my desires since it’s so good at doing its own thing. David Bushell has a nice <a href="https://go.sparkpostmail2.com/f/a/Peuf8tke3Ri8NyqDqiJ6cQ~~/AABEfhA~/aQeRdncp399zNDgGbTAmoU2N1DC0eRa3uouQtnegoPO_cD9R6mahzRw4wqhYQPs8y2WHihhUQQ-So6mq_DwATIyYJWVzbO1gvc78VNAnQWfgWhbV2YAp8XbkzP6U7qRB__9SveivKQIZonJdRw9AAL2wVrQ3P7c1B8mQoD87O9rLOwaDHhrG2rxQZsSqVAfl">SVG Optimization and Accessibility Basics</a> guide.</p>
<hr />
<p>Poor SVG. It’s old technology that hardly ever changes, yet for as much as people find new cool uses for it, people also still find <a href="https://go.sparkpostmail2.com/f/a/qbVHZzgXRCEzttV7bmltuw~~/AABEfhA~/dVKCr4YvOdYKz3woa_4998PzI35MR-gzR3PwOlTcsukVJI__UIO0YEoJpocdLP8T-hbD5Yl-E3yDcLJ0A2HAhhO_KutXLXaZdAkWheitbP9XBLSaY6vo28sEEN5Dzubtv_QccImU5C-cYNMT-oKW3iAGNnw1WGFFS2RvYDX4U8c~">security vulnerabilities with it</a>. This one is about clickjacking, which is basically half social engineering, that is, placing stuff on the page that tricks you into interacting with it.</p>
<hr />
<p>I’ll leave you with Fotis Papadogeorgopoulos’ <a href="https://go.sparkpostmail2.com/f/a/WQcgATWZfic2xBmG4TGFBg~~/AABEfhA~/GGcB5UozfBra3DP5WsRC75BeEVtsYviTb_dIR8h9cmKU_dzjRByY8i-t6a8dK8OYLU62J9hgcJJzCLgKQp-rt0VCZGihChZ8IC_YfCM0oe4AeDYYFAd1Tc7zw5oG4n0kvqVzt4uCXL8vLtYft4djpg~~"><code>@svg-use</code></a>, which I haven’t tried yet, but it’s a way to lean into SVG’s <code><use></code> element. I can say that there are a ton of pro’s and con’s to all the ways to display SVG. I too was enamored with <code><use></code> for a while as it seems like it can be so efficient in so many ways. It can be, but the downsides are real, like the lack of stylability and the inability to load from a third-party domain. But this tool is deeply in JavaScript, which I imagine can take a stab at solving both.</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/pWVi4O-wJ85kBdU6BgZwrw~~/AABEfhA~/xO8iGIMMdHgGTPMySkQUtPgF-Etouz2xZ17YYkCoT7oC9J4wecuh7jeqB9KB77Fziec7lY7O4TqpyqQPJPMBJ9f9xnJhLEOIc-QKc3yyr7o3OPRzmEWv6annZ9MIbLjV0__idOMbDzIRTZ1FrW8O_Q~~"> email preferences </a> any time, or <a href="https://go.sparkpostmail2.com/f/a/o1bVI1EsuI6CUcvwTpoBrA~~/AABEfhA~/vU9sfk3bof8nMgifQwHntJjdqr1whYQmBNaQJ7_nfqA3FIsRtO9Ehb99JqaXOUQ1pGTQFWJT0eEVyhtCa6resSePoWSxjlZ5QiFJktErooFZg2o_rWaZBg0EebOZdtfASlc3kEf1XR3rin6T-zJQgX4gjikFf-aUuLYgn8OtVMCtNxVPAg-9Leusbpov4lqjat79Aa9fq7DYgBMrO7pYkMiAas7fBghHOLY6iGDTv5Ev1yttn897LbCZUBAa9tW4SWelz_xAx5PBeiP3WkSR_gv3KUiGNe5KXVjmkVnYBKB7LZ4Gxmfdx6NjKt-eezvFFN-1eYbauDbe6vfuadypDwZOBwVwYM9aQbGRlvQyLZ4~"> instantly unsubscribe </a> to emails of this kind. Need help with anything? Hit up <a href="https://go.sparkpostmail2.com/f/a/Zj21utOShLFLa8Yyc2NvJw~~/AABEfhA~/dmEBocdL--6WLS34Q0avAhqb0qp9Hz1ep5KXEiD4FhBAxlV7g3wOLN_bxznfbpFNo6f--yd0JWnSrxi9tE3qz6Tp0baF0g4tmbVvvp4Z6M2TO0d_hnU3XB0XwPvhMQWu">support</a>. Interested in sponsoring? Here's our <a href="https://go.sparkpostmail2.com/f/a/obNN3Ydg0ghTezIqdY3bhQ~~/AABEfhA~/R8VgIu7kW3KZYg_oQk-muEJwifyq57VQ8O8gdbbUicMcR5ywpXPKI9ay48fG4euKPYd1mziCLQfyPdILmSnnwGvpzbG8B_Pc7KbMzGoQrYqINKm1eMaBcK6Sl5lRqHS2">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/rFNlozs8g-Bn5wMZ-LCh5w~~/AABEfhA~/32o9YzhFWwdHVCL3sPrNIuoEvsuNXJNwOu97HbpcLZhElxaaKCWDdfn5SNa2jBsx1T9VHCpPS-bolwGCJH8iDg~~">
</body>
</html>
