Built-in shapes
Book
Curve
Curves
Diagonal
Hills
Mountains
Rays
Triangle
Wave
Waves
Zigzag
Custom shapes
Clouds
View code 4630a078b5397d6e4a0cec73f8693dbe185d3a46e5279b5631e659fd6f0c93a8d3ea2411819f51afbd8a62988c4b1966511c7d89d3f5c96b76a961f3c04ec93974ae656da61a64bc0f56d483dbca2e9065589b33555b1856698ed09e458f8ed53d2026eeb3177d8a10a73f3d0f4132aec37d6fc9c1e4358f0071060cf37e4de64979d102e8998c6088b12e8f6daab28364fbbe49174c77f113d9e22716c2562729ce2185b09f62b57ab62d62396349c68d45bd5699d0d439bd96564b4d9f7f7b1c59e12fa8149009cd6acd3cd285569b8220cc8715b9ebb793a11a57872676b4eb02f2303f654944bc27337489e1a2ad8db461b6be5adfb20f823af7583d281cf9b300358177cd3cdcd93f5480c2c70fe5b520ab5d21a348bcf53a2571915a42b92de1d5862d36ef41bba7139fbf641bd42725c290b2d9addac2cd135d79adc448fcbacb60cd16831643fefb0cb41a55285cc1ea71b72b686210ece3f6ce5191870d7cf5a84a07d0a8fd1d814368a209fa1bb87d572401a4e234ebc0d4f0f03a4067567b5cc9a4f79cfbbff7b4854b055eb9dba059787874d7f436b7188fd12d18aa9ee3a62644aff799bdc3d4045b3d4f3a9c38609c62625b4596a9e71e4c7ac6c79a23550a92e402821677447f2f1edef0c93a227f76b706f7a6d89ea425215f8dd3052442a1da7925ffe9651958bf8ce05ec3aa54444182f0dcc113bd3b4a9b6ca5b40df444423c3de16c81c6a1b99f23756b1ce62bb6bef15afdf3c9cbefd48d46a654ce185bec9ce11fe40d4a7d73637575bc9335563b6bedae2c92d1efb352c626665ad11063adb81ea577d7d6d7a5934175e204976fb98fad47d6f404e758a784dd91abaf1b95c773e62896bb46b620cee28f744cfb760f32a69f0d6b9056f2c00473f08c3691112bd716c7aa76c1a07b9237bf7482dd176ff196e4d5b3706592fdb3e4f662bae6f9ef395cde7c6722a9a3f0174a1967edd6dab128e605602a05b558004ce66126eba893d2ba5e4efa383756428a3fc286508296af3ec7fc6efa9aa6f5dae86b02f795032a9a3d385c826bb3d4d2fea8095af8d7ed18f19bb1662b162945a9e5f40b9014e1091e8833da24fce5f2f62e8e6550ec2d0f50aed707c5534b1053e8454781c1f7569cd8d117b9c9e78eac465baa72fed35b3a9545eaf133d8f8180bd5b91932812178f1414b2ee67829bc5e365ca62b49bf2a3bdb6f20a381ae51db8f316d72a683de34504aadc7a6e49d6aa70fb54760b191984a6ad3834927581caec1ce764923f48e4e79a9a674b8ca7c7b7bd2918937d1e8f2fccf63f4992266cd96a13efc4f3072086d720c64e2c4c37be7e4b16a85e5ebe7d592b37628aaf8fed727a81625d6eb6612e62e224b24a07bf7cf2e154ba58334d296907a82fe5b40446a2e15ea431a83394e983e8bc18a8ee43b9c9cbd96cb32e55c6abcdb521430a233cdb80aa22f277b62161fd1983ac183cc571e16bd0ef7741a4dc8978b513dbd03eab4e031c4e725b6d0324e1804ecba78d4cf8905c91ec68ea73584345849773a8caf52a8a996052d835548fe7f7bd3c6f5f71d5e360f1762dcb2085faa70ce2893e740543781e7ff6e0417b27ae65da47dbdd0b88b7735ab250f971d307926bb1147adda9779299ec2d53bf6aec68ab4929e37c5c60f1f8319f03da63e7c760548005fbbcad9987a34154b829baa90960dfde7458a728fe3d775459c0665acffcc9b0d6cd7d171a1ad8d2660eb356a2f5657fc975cb4a682e7bea820a749e95e01decf7fbe207a8e2459b10fc947e759971f5996efad6e5efb1a8b9828cb903c56675725e2183d99bf503848b81e65e9237f384af98dcf2a0126bdfeba17af4973bccb3412dccd12d5af2807fe4514dc2a76e4605692f3b97341e7ff45b6946d3a7104241c772902b1c31bdcadf72a1548804c7fd9fdcd5b01242f6f0b37ab6ba256e634769dc7efb1c46afa5f9fa195058f010046c618f57660135ad5efc3c524e698141e6a7712e9cc1a9b678600881f00e252f1fd9620e4bb955a4f13017f28daeb81a22036639576a72b8d70f2dc7d34f8
Triangle (asymmetric)
View code 03468f85b079ef55f8cd6f1577bed556476e2980f3d6dbe16e87b80f7c4d56f88a57eebb3fbdb8d74d2c9c28e317126d56f030027f734aa7b5bc1ecd668ee1faf514b03151275377f2e141a1c164fa520b355e27e390d8b235af4b22efe612efa9a8bcfddc290f7e29be711a6f3fdda344d7fa747558720832c5da6c26382148b5e32fc93fc8ba8b9fa15af8da3337ec081c6b9a1ef634452c2f04d0c90a2a00cfc6af4190cb0694a28b7d89b7993f18ce3bac009474201263b8414a28c719b396a794b0aef873e119daf26e1d8021fd3e94eea64f4ee3b78fc9d295c1bb4312f2065442947203d0603524cfea6df1a12bce281a920dfa55ec988ce537a28723751d1ad3c567525dde964f948c1a80e41fd2efb80d76c8bedd62bdd30ba9478538cf9d045dbc23e51bdde7d49b5da013da5358f8abfc249c77326c1d1f6fd26a702a32c88ed0cb8a99fee2f31b625a6d094f7a2a01c75d5724a55b68a68beb73dffb4c69489dee290259ecd095794dc5f6a5c82ff18831d684b268e263ff66117f236d6f7c5e1a6f241f8fc0fc72a75ae1315f8bb6c22ee22379c8a583b184b1639cae5674867b502b27ef847d457fa1b7df17e96247947021b62acfdddba3c29ff9558ad364873322ab16b3cbb42695
Wave shallow
View code 4fddb530a8d94b2dcf145200cb09c83375f0e5814d737b0a148e79ce6318d30e0527924f6a62558401178d21fdb39d9166840dcd89cbf61d8c844e450cbb481f0697bfc98bc774c01cccc11b6f453ff53b5cd45d5f5f6197c46222a2472b6ee85c99f970ae93de2eed4b7dae48c2d36793dd68a802c554391c6a5cc1be6a12e7fa2ef688be66af19a2881ffd141f592802171bc2639010e87f495fbc2b40a771ac71e35a270bd58c116e904a79a88c50a82d438665c391d9934912e89af94fce3450509347f3392d1807f9521e0e8cd9297600737ba256ba4046096dbe178e0dfc27a8982356ecaae9b9f3feb17e6e17c87089c343faf965c70605fd4c0034948684ad3be375b515ed122f962cecac251a6419184a825a7e95766d60578449d4258ebf25442320ea422554383db55b790d11e99d74b8b8e0bea9792ae48a4003b5af1318bc27c9b6c01605c5a76958a30ba0614999500d0d4bea36dfe41b35889d080d1278e991b7dd1bc70839cc3f29ec7817e96790569ca6d214d38ff23b6ad14fc56664d532f5c548da920db94d34fc9756a81fc2edc8f24089003f54c424d2bcfed48fc80b5a9cc993ef96b34e7e0e3cdba379b26dda13d88f241a3f9ce478c7e4f0d303ffcfa7327ef076d6c3b58d5ace03f442a3933f98112eb6e541e383fcbc21f346e949bc27cd786e133123f1669eddc9c529e31e1e3fd55c5d15c8ccbd69519e9ff05371f5a6c838ba30abff9e346a9213a424a01ccaad447646e5
Shape dividers can be applied to the Home page hero section and page footer using the Hero shape divider and Footer shape divider theme settings, respectively. Because they are all inline SVG they can be easily styled using CSS and (re)positioned using utilities.
Replace the following part of the home_page.hbs template with the code of the pattern:
{{~#isnt settings.hero_element_shape 'none'}}
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" ... >
<use xlink:href="#shape-{{settings.hero_element_shape}}" />
</svg>
{{/isnt~}}}
There are even online SVG shape generators available that you can use to add even more shapes to your theme.
