Built-in shapes
Book
Curve
Curves
Diagonal
Hills
Mountains
Rays
Triangle
Wave
Waves
Zigzag
Custom shapes
Clouds
View code b62009a32ef73bd4b24ac7faf3b8b1c2c472050be82182b24d1ecc36b5a588c44b450a9842cb64a1981c9552672d6a6dde6598227f6a0f8af941e8112890840b985e7db9ec15f732b4c3c88e82ced139b97afaa2ee7ae6bf4e4b07e5ba58c65dce327334b8eb5f36ad128b7eccc875a6451de540a883e146c4092df53103ace09aab524faaae5c9263304e7ef7c5fffb55ef85e84fd69a1c582209f088fa469cd8fd6cf8bb47f00affc74dae43b412da1afd23c72ac9f01c2335f4fe52aee78ef84e4942fde70a79f70b5962bc4d4a7325b49608d1462f975fd680075282ef691ca003dcbd83e337871277448a1b5229f1f2b125b4772d1fd77184714eb554aacca93316d9f972871d36684b5fb26e5d6fb73ddfc3ef569591b998233ac6feadeebe41e58182e098a2cc014ba21ab5e1ed11e694d3f743061daeaa20c687e699df921ab74e52e88cab01e1249e18db55299cdaac4483968e7131aaa7a53db5a9d7da1ba37175e463092ab976ebb87700a7e2a8ad3d90edf80e2842aeac6437cefba454f0cb5d2d6d67e6e9fec47123ec8670fc6c49fe6bbe3bf0a5543a0c0f050ee75a781d54e684720859e74b4f19d245c60205243b2d5d0a71ef83f4ceb4e57c0774c1090a9bca72286bbb4e4110ecdc1fd86559d4b71bb750d68055a1d4c651cfd911a5d7f3108e5bc41fdee935c4384020e924e4135fdeabd3b6e2261d6b38ad45707c223bf135460252d59a6aa984353ad653c00ab88d36cd47d30f16cde368114b4db1ec8cb59580faec4cee09c0338b76622b397f0289407f2ad2142d0352bb35cb87078b7c6bab64a60b865975045513df957729d337f3bef68ad4117ed15fc4ea151b0151ea5774c1aaf325b6cde59a29d36e0aedc42d0cd8ac94ec5c8b22886a05322bf52d6f3434737c868fc27e7cd6407239aa09ff68cbb38653dcb7920fa84f3b9bed17cf2cd9aedf8489a35c74c7fed8e21ec7a29f212925c6b663064886becb540138505f3a6dcaf64900d48df135eb47e251ee8a3bf21abf06a119be6cf9bf635ce4716939c6f3a0e9671c218a6e40d6a360c46c15805b88db753828fa1f43fe06ac85025a9424f3d873edcbac02c0948e40f85e2f07ac88d591fe546ca5b8946dda53ace796cd1406af6d4f69e1c9c15b706260a93970ba225ffa85fdbd90a99516b62ad8e3833798f011e4533bfe7d7a600e3382f78fc936872289ec79db852e0034c0c74568ac7eef0dcfa408527426ccd6a5e9feb2e8aae1b6ed5078b1ecf775965f5ff120296c0fa28cb9d69265201ec42e42a0c696a283593173c4b819eeb5c4651754c2835111dade886d4a9cd5d9fd9e42bb41fdfaea87f0694513bb1593313afa9e6bd72b3c8e5fd803042ed2f74612eb3d80b9ec835e69c1a53f68db00390d1ae53ed3abf32deed599fde2d953b1fbaf8df20ba53146ad7f2954ace803a80cc87f9f25d38e7c3ecee86b893f7cf89fa68c3d9b93b8ea0cba205c008d72977cf408042d90b5d8475f2853c2b6f710dcbb2c8598f146044d1a1b4e58c2e4b8ff43278985e953e8422767d7fd69e8e269fcd2b64a31880b07922f6d6f5c1fbd934d7fae126330b9fc0bbc4c8abf360f51ea55637c6ca8eb553c4b7123394c44e251c86b5c24af3027d9790527e261f99d0baef3df66170e2b33eac96a267535a046cd5164d9a6f482025a7c286e0565ccc642fce4ea0aefcc807c35fa4691f9afa8b0e61dfbcd735b84ce7f0357aa811c17e8d5748c8107430d216f2201f57da6a9ca0a674081e48ae31d1c012d97c944fcac57bf2dc949e0311bd8fbee28c400237a17d51f549e455e10700f072966e19ca65c55dfd8b079eefede8c464258d68f0227a09f96cb6f9e4e92f2371f3cc9203c7e4f7bad0655af57fbfb4b9ccf7bdbe65c6e04dd4b034e85145899b2f7b8c9f4d22a2143402c9da77d0ac304e48481ca6ae8b22d45d0cbe8d66291d6e28e3f46c9462adeef86e119ff23cd24b59fdd6443a98d684f9f9246ac0d7bf16e34a3f40c4e3bfc5ecf3dbb636690eb75078662ca462aca210beeb123084d73f22f6583f463
Triangle (asymmetric)
View code 5caef3e11b6b00f1d0a055761ebeea194c999ca04be9e76daf838e1e3840f78c5a0d27947619e92c1ca1d5ca1d35d6881a5e3f22120a0da058308b8a9e5f76dcbd07faf5de830b1c48ec4c8f4a3ce12542cf18c3fd78c1e204b3ef953731f73f5845fb7d8bc38a9f4b49654938aeda71a1862d094c92b21247e007385e9f14f5b2e4ed248bec6254777ddd1e0dd5f9fc339b26c47b2998f921b3e6ceadc00d9523ae815ea934e3b140e0a9577b76084763ff45959789f6e186ced94224724bfac965ff71cc150b1ea77c53da0ce630d8f7315b576b31501873bcb52888a68859888ed97ae46b6ed5a43d22f9610484011e8ee915a0b17bf08ed932a70909dea6b4518d2325cd89b675e737f2a77fb2deb08ccec2254fbb3ac8ca8ebed9c10dca30c1fb05b0f14703358664b560952b323ebdd59b5ecd073390a72d0ee758765f69c6f7054a27190e9976355b5f5b6e7ce9e7bc00758e0197531e4536afd200f3fa210177cb1d4521935e3989aef9d94063faf477c68bf977a87995dc1211dcc339bdc7cc066ff4646da02e401fadaf4e60a59afceec69c4de39b5d62d4d6a12f5a0f9b14834c7982305dc9b737a7b08c3bca8ee3cab74713d1c09dff9c0f5291c7595f929de82a68fd16b3e9dd706ece
Wave shallow
View code fa5e91f7d20f7dabc13f3078a62add719bb49c685f4cc8fbc02d5424f0e6c601cef49216766b270ae395dfab2bc8f1b03551b99e0244ce2ee4b46c35ccdfeaf81ef1a19b80e31fb32fc375fcb4273f6601fab5d497716e28fde9e9963af8be439fe92c34ac2144f9056c571d2b1cbaafce89f5853f848e4f820047a56b5ba7948e6b394525903bc06121b4f18cf9db43b3ae1fe5919ee3ccb9ab8876eeadf66de1b094db81c72f72cc32647d2ea6952aa55aa58f27e611d0d10f53c4b31a777d76928ee8635036b568a2ebd1d23372d20650cde119d0a243d438381713b3cf9c3cdd7f3828cfb8b2cff9c7dcec7e7090720c6c676d1a36d90ac6b322e1f44492833515385b26d73aad2b60ded37a858809a5f577803cf9012dec1debe86468a1b1b384fc809609d90b87fb3a8d77fa69d1f8508758786e77d8488c33cf73230188ce74d8f04fec34578e151510bc76174e276e003eede7bb57365e98e6316563be1a782ebde3e201f41af7218f6df8d4ed3dc9efd3d12ccfbff53d36c1d2a21eef56922f265a2863c1e5e0c2479fd836cfd46b8c87b4ebcab3ee89fe0646ba84a3a61e5c91e6957bbf986ba4c3672897192883e5d15f97310209269e5c7372a8affffd0c20a117cb4516b1613de4b5e1d10f0ada107378746c3c3cc84c896af0fc3109569f28216d9c2c176a4f8b9e871ce2936d7cba8ce3f20781ea3094c8c11e46619c4d6b19fed12e154ed73c90019f4953109d8bbd9f19b76d37cccb049e
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.
