Built-in shapes
Book
Curve
Curves
Diagonal
Hills
Mountains
Rays
Triangle
Wave
Waves
Zigzag
Custom shapes
Clouds
View code d5ddc6013b427720f6c36e2461cf5733847771d043ea742b9e849d0ab6d7aae227f418c2b13de5baa1c42e61c29694d0be7dc29b677b745644c9c7e7f557b4f70b8aeea714c3a06a1f469e556d707c0b50f17f234a52d9c066da2868f166410845a49149cf4181a42e5f6f071bc403d753a34f98a418d9ac2fa61825a11d1466e6b0fcde67c424510e94d530dce2e278bbb565e136979ed908f23ecb976446132b49eb32d90fadb4e0bc5c18c559d83010e679cd8cd9053519ee75bb473ce1e728476d83f89518f2d4de1bd613a21e44bc99b817714c7c184fd05aac07478f91bb41bcc627eb4c1e340a06f54cbc40554445e3d8c8ba481929fda1edce3c5fff3423c05c5d2ab3fa9542dd644343ee08176f42ed0191aaa9b0b4df95016e72847731ce1184b3f4a050f8a2025d088ffff01f646102ad140d1c90a3eeca645fc8ae86e38f4eda53655cc5645ecb521838fea6661f033958612ecab603a19d39779dfb68e0443d6848b16947d10f40f3b6d652997bb1830c07e0ed3d39d8d33c94443a032b9a5d0c5235605da05b3975f6c10674608bcfa7222f4076d85ac9f966e92f69a8454a0384aab76401d084e0ac5c460042d77a1e4686c6becd7f3af764a14d89a80c016a754494518fcd5c14c2b4509394ce9798f4b6bb1e49af0c514a7bc14dae482c46d31232c998503c289a153618a1568aa17f76eba9c9915dede865bb0e6d521d0caa81c4f2fd8deab4842d443eabd211b17a8a6c5bafd144dc244be20d98ecb0d89042bec17fff6205863f2ee11f146a3b9d3856101260b4174a57149455a88bba578c7f4d0fa37e20d94677263bb188a378c302d4f9d6d0988fd04792facc7e36532b513da2755725d2e5f333dcb8a9e1ff763ee322120f53cb50a632d7cde089e5e01ad4d9d440a4409c4a777c88a28c4ced0fde7bc2a6eb3c0e5593c21424bcd91e99840453cb26fe5bdc54595f4ad10ef20b8375105b1e85986cd737b9617045106790b6a540688efaacc88a6c9ab5b8947151fb2cb97ff058af46393a331f10efbd0e715f046dcc497bdf51507f9ac5a09e4519a6a3ece739dd66fd782d71e6c496c9c1a11c3d0c6e9da06726f9080514e10b2b9930d34c851a166aa91d7d072b6f1011fbe8e09a6e7183fe6ed21860c88e3f0e714da1997b2247585aa9142a272eee318bed72f79ea1cea431f191d1c168b7ff881081c917cf7ba88f40b4cff70fb4cddd59f30dfdc624c4470c973253f8d2d0c883d6dfcff62fdb3c2b0b41d9bddeacd06a45622c968f9a1c1b4724d4295b8ac4f04bae9f4188971a2a07130578c7e7d20088a8f49580c52ebde78bcf33f09dbda0c72c240d4dbf9d1e2e33e4565bbbc9aff9a012d845ae652c176b9f0ba8f5774b376ac0a6ec063eded3a85bafeb85ace0a116d611e3ae9ca669f3f406b7b0721ab6ebfb7fa26a7af8dc58c47beb2bfc921fb5d19726ffe23407155f8c8cdc52be352c163e7f699b32f56629182980accf5c83f93c3808a4ec440ad04cc7b5eb7556531ecaa036a252266c7b5347059e8d3d2d944436e877fcb449997ef8958d2f06129894cb21bdfc759a1f09d845d1ff3392e9e36d70037aa0825a49de1951120987d91ddef15643d486edac346f828875c1badc39aa35c55cd1ff0ca3fc1159b4ec01d816a147f7c90444f7cfd77f848332a913e8d80ab3e962edf37d129b25d766653ea4044b7245e35d8f244869c5be1856f88f12ac63f62cd257d1d47110d4e0bb940a6227611ef11a4c9fa82d8f5015c7f3520ba8f22eb5caa3e36d8acb76ca4455bb4e82e1dea9426552c84e2a1ab792432f5373ee227dacd398705a894abb066957f70377492257487677f4783dc6f39d2c1301234438f864f65e5ffefbf97667b02f0e475a71e73379e5e991ceb03995eca5d09f030eb92264c9522a57e40c357371abba480fda5397513db2687395e1bcdb206b950ad4f604110a729e484fa45b7ef1d7ae1cdcfad75707c083ec9f294b4cd49f5f7965dd4e6f55da251831f1c8b7c0e8f046d18b918a21ad6c11d767758df5307883c7d1a703da7e27e2
Triangle (asymmetric)
View code c70914eca2708bf4bfa9ff501c7ee4c0ab62f1ea6f90287236ae3b5641843202d49550e8e0b26132a3cada74144bd9cb989ad7f9060a37102f80cc2c47bd6ffd6c03e14aeee6f401166654d05c32b7693c2c7a97d7135b66c07017528ebec4ea62302acb3b9424b9fa978a7273f0ffcae357b9a2b3aa324bd5c75495b17353be6bd1c9577a20d7cecd76e5c1c5cc1c3b6a05ef541b6d52225a494eaf1f95720c16d4e9750702d233036a090a5a9845c9bfee732486367d0acace4fd113dd796c672c72ed036161247001e18fcf65cd8b8297977d43d2e4881d786bb9b0563c2946fafed5f1ae3a6fb90b29d864a05bfb7371e71dd4ead29e60ad850b90179c983bbe6d94552666aaf984e6315197765a97c408b29fbbe67bc707d9c30e10f68b2b8cca22cba68517567541b4bc9d29d899efa1cf8d34fe2205840a01028a821091df337a8b47306a276b7adc9dfba23c3f67bd35fa56b1315aed6e5ec91f48b960d3aeac0e812c52f42687caaf8b93ffe161046fc57c4073f60c88522ba79c2ff9e30bb5d51bb1c817ce9ebb84fa1f9a0a8b670583f4f4d0a8030419355625f90037f735d6a5d19c7fed6b3d45d87751e0159f1718e824be04427eff69f6adaf77b1674e8b88e0f86db2a52f98b9abe8
Wave shallow
View code 38f690191df08f94fa02f2b6895838a26f8164be718d6325def782fd905984e6cf596c1d2f4cd6a170c86d409be751b4b23bbb26c687fdb97e31859f28eef5b862dd503b0632bc2ce318595fdf5424fda20f5538e17c0ea402a33efc3be6ef938ee3b92ab2bbddcfe91e5656b095bdae676c0e11a9ca868d5f2727668299eef9d7b35f730a74794724ca3ccd14c318e739dd002546c39da85194c94d19cb419e2ac1ca9673e774a340d1d8fd3f189eb1c8b2c52f1b768f4cf8ad1842abef04c0799b52047c18ec4b0d20e5da9ea46bf80e24a71ac3e2ee12d7db6f2b5f60099e2cd68207e68cc4ba5ff90d301ec9d9f0412c96f453f158c5543006321ce0a9f3274851cd86a2fc600ad98a16bc93ff6acf3a054f3416e54d234fa3149b8699d0cba2d3a960f3e08de45f63b8ae4eaad118a751d156dda1975ab22faa312a910d0d463267b0b2109a8e94317f0a60ac6197e6dcf29b8b459eebcaf12abe584f84b4abda0c1e8c3f78f39e99c9f4eb1225fc5131fc159a24b19252e9cd4127cfa5220f9273d50e1e77799fbe6db039277d5ec0845d9ac70abb9a0314c7d64885ba16bf146ade2de385f69ffeb59b6f0647d13b4e713f9e9e61ad72af674499685a68ecb0cdd191647c9c93f384659dd29d5331cc37dfc68bf0710fe18a3cc1562736b92be3ceff03069242dfe37a628e654684e0113b1185210959dc6ae1cfe5dd75a879f19f71d915ba2482d432d2cbc8797baeb2e23fa33b930a2f93c9793e51
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.
