Built-in shapes
Book
Curve
Curves
Diagonal
Hills
Mountains
Rays
Triangle
Wave
Waves
Zigzag
Custom shapes
Clouds
View code 9546b06703423b759bcf46f6843ab93844a8d0f6972824c277b1f55bd718476ad345d14a554d0f00fe0b161051db6ada2c52cbd2ec3900a20a46867afe9557254da323493d522a2be4311dafd8436696f2a600b239209aa63ceb8f1ca1371412c23903d3495abac7f04082be11689c2f9b3e81d93e59e83f9f35cc670df462e3d998bd3a4b92e58c724adf669b251e1c008bd77ada6c54535adaa32aff5c0f5a5371293a10a40befcf93a6b9256f703b9af285cc689c39b1115705a8007dcfb549551109ae595240c9c46b700e9a2f7f171b3ed5ae9304a7896518f8c9348c8f1df7d85d3246101a1d2d8a54aa752cc204c6c29ced278842093557c1009ab577ef981d880c1f71a91e85001d2ac347a0b6140e68b45f416b3e1a86f60de9ee66a5a2eae86a0796d87bcb6fdf1b5bc7d7ff4ed4f529f41cb564a491cbc30cf9d87809b5045611885635070eb236a03d9f1c7cf86feb63f9d270c48920679a72544f3610f89de180940901710d2d6177baeb8b6021ded929e83be6a9e125621adad06629819bd7bab611e29ddb6a7939459b4b67f597fd42ec76774bddf56c5e774fca2ef5b75cd6c07df9dd3ff356c407ad91467fd78d8b8687e0a9eb17514249092e3bdb3af834622489f91dc25a9584d5bbcb93fcd2a8304266bb9db3a1cbf7d0fc223a6d53d9a9605a781b5ffc687bc1a886c311175cf90ca9ea8061aa659fcc4901b9cb8b082eb32f7ae27240b6730e128750628550dde3af02ec502fad753e105c414fa798351ca394410f36555848920378420456b5e0518d844054781249d7c4b51eea670bbdf611cf3ac201c828f5144d4619b22dc10df04a1c2eb0ca3c406441be7955e4e79bfa5b22d3ed2c3bd48ac5b19970c86173a1154b05c55a66801290543c8a15af6667cb53d7de7cba93d0229fc42bb3345b05be5d240a7fa6001cb7901bee41dae92c6968e8619d1a96808e89a73dc1614018f7f05c3071f245b064a87189fbfb0aa081461904db8bac3b326279ae9692df27ead2e7dc58696c74865c1c0e5c35738d0092d2fa17d5e1a5f6e4596f2825c474a74d027fccda99efe624c75c336e48d9d359529afc712e1bf9f564ebd0dd0df0e4c88deb4e492d74fd06babcc1d9c608776b846a66968659529f0dbff49d93679b1ed8e664533ab4f12a95948358425d8419b212585aa2d52594424be77751b839e18988c654630637a2080a84b3c88843bc68f37c50070efbefcc978444a4fb744925ca05cd0c5ea7b6b1e4a4a874289236c79b44d7439ca69a378330576da16c3175b99e64636819c98aaef10c4ac27cb62d29cdc4d8c0705ab961ad6081695ff20a5f32761789e4d6e35ae915aeee1a904480816e62dfd6180e3487c84ca8b85c2ff8ad05f261e771a1a194267f880ad670ceb541d1a9dd3481792bd355e7f39c5016f54a6d148084485be72703f5ad0a76f432da1800f6017404f4b4df70358bba0f36f96068d4e57bf13da84607f2d055e743a50f117baea7366d804374e987e42217a077643b9ec01efc391d33a693d33302e02978bdc6651db21fdb9fd452e148ca4d471f45df4e695e6b01da1decd19982bc2dc9e5b64fd8aea91be60bb37f351c97ed238bb8ae399db36633b9a16b0d6b8fe0ebf458011064fb4d0a54e5e3a4897accdc011071e19884cf46c6cb22ed65a65d8467cb046cb44f0fa9cc63ab565b665efa3682f48c2262d95888f66a34483a43fd1a7b72ac4da36b8f3c56b85c22166c6243d09ad50245453963605fce30ae95574f6325823112ed0fc9140ab2945b9d8e003b0de7e5f72cffcf371e1b5d6ebe5a21dbb1d7354dc760bdc2020868ae5b52f821069c14844a0f6a8969c817e1701079cc90b95e5ca8f6cf4718bde24007a08fb0381d371c326756cfe1025d7e51caceecb3283c5a0f424965f88586d5a92de994ad7de8e537232779e15bc696a452529b52c30f87befd032ebf72c840c5331720795c3fdc23963f180f08d7f35f4fa1b875d3fa4c7cea5f5f92655f44bc82b5ba9f0e302fa978c557006f1e8b6c3a1b12f4479c134e7a2a04ae649d
Triangle (asymmetric)
View code e599c7a1046da5eb163f8a14d4fddb7e48e26eb2a1103ede1e080268d0a0cf1b12aafb6a57188ae3dc637af5c09210e70ef6d998bfb4a84d50c3067baa3f987d27009058ec1574ca292aedaf0ee759e9fdd4bdd47d64c42542f652bec098f331696ba85018b6ff0c024be20cc6ed5726eaf68870dac6b84471fab12cca4337b356aa8a64ca55c715ce81d993f0d1b78706a1103c67fa67b57d1e635e911ca0f75e478af3084bb51ac69282ff6bd0919dce02c430bbbddae01be0fea2b6963976c06cad300b29c4dd3d3a94d9631ed7cbc83d48093df17fb14c62b73a74c4b3f71bcce7d5012b20c0fae65c3ff30b18eba4422ef74aa3580270a4c4bc74ee6b99c6062a6f4ddf40c17c1f2a0227b6d06c6d1c2c384c739e8641527a4f2315c82453d261fd686f9b065c3eab00bd5e27a0c054ac808a8e922be0ab1e2eb5c7f57be2502ff601b7dbd9a2b03b57b740e3eb0a93c9b744f997c056e0551fb024c506ae7df98f0f143e51242c380c672127d4d32509f2f2ce7f5c80115d8df0f98f5d3c74d4140d7402215163b1e7d14f795b5c0374ff670f57824d47d8daf2eb426bc109ac3140dba0f325befb479d4eea1816561fde6cc9ff0808618199f9ffd1125b185b442c37b385e5caacefd01eb890
Wave shallow
View code f3f0a035efee37e4b0517647ef0206e7f910b721bb18913a4ea0253910c7283d7fe36e245fafeac98858efffaa608802c17a48c25d449afe1f03420d7d1b0f70f653e7e6176c04eef06ea47517454a703dd1f9b8283cedc1d7a83e0f404571358d6da8a8031d5c517ed4aeaf176840e35aa5a9c1ab947518e342d9b45c8b650fe5fb6d6433a3796dd0b6a9f73add0f544ee623a276cd05b76309bc43c37d037518a60887ea00a37c3b0752c1d444321331a159237fbb8c97cb02a684dd80598cf15af9e37ee547196a02642531e5eac9451db0822da906758ae1ba3091e6ee7e397fbb54e7e795967a0c82ba0a6b08ba95af239d3fa03eb0c2930358790eade132349c9f1d198f47e04a07f49391069148aba72acb5fbe19f68d41206a8eac687af61413d0a3229ce8919bbc239c9b77d6b79c9291c392924d51f5e1e869e3786f72bafc3b401603a959f29b988f0090059928c49e2cd6b067ea856805b972d5c18b2471ba6716200b53911bc0f93af2e0397b13da40f1080f5050d40d016672a038e430813e3caa7ae8e4e89ff9b5b9f274e77196980450aa5403c1366848b22f1623db74361a55c56d622873118ffd333dcf0206f5428ed3595fa2ea29a9aa419981f98ba4ce556152ee462fbab35eba3efd1ac24d10c4459bde0b6419e23995f8c371e24203a8646c482765a30ed6609fbad700b564f06208b867288f472cecf463cb5cf9d555daade7720cf42de7221f8eb260ce2bf83009006b7c5ab4bb
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.
