SVG Divider

A collection of SVG dividers.

Examples

Image Description
                      
                        <!-- SVG Divider -->
                        <div id="SVGDivider1" class="svg-preloader gradient-overlay-half-primary-v3 svg-divider-polygon">
                          <figure class="ie-circles-hero">
                            <img class="js-svg-injector" src="../../assets/svg/components/circles.svg" alt="Image Description"
                                 data-parent="#SVGDivider1">
                          </figure>
                        </div>
                        <!-- End SVG Divider -->
                      
                    
                      
                        <!-- JS Implementing Plugins -->
                        <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

                        <!-- JS Front -->
                        <script src="../../assets/js/components/hs.svg-injector.js"></script>

                        <!-- JS Plugins Init. -->
                        <script>
                          $(document).on('ready', function () {
                            // initialization of svg injector module
                            $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                          });
                        </script>
                      
                    

Say Hello to all businesses

Image Description
Image Description
Image Description
                      
                        <!-- SVG Divider -->
                        <div id="SVGDivider2" class="svg-preloader bg-primary position-relative overflow-hidden">
                          <!-- Content -->
                          <div class="container space-3 text-center position-relative z-index-2">
                            <h1 class="display-4 font-size-md-down-5 text-white mb-3">Say Hello to all businesses</h1>
                          </div>
                          <!-- End Content -->

                          <!-- SVG Top Left Shapes -->
                          <figure class="position-absolute top-0 left-0 w-60 ie-double-ellipse-top-left">
                            <img class="js-svg-injector" src="../../assets/svg/components/double-ellipse-top-left.svg" alt="Image Description"
                                 data-parent="#SVGDivider2">
                          </figure>
                          <!-- End SVG Top Left Shapes -->

                          <!-- SVG Bottom Right Shapes -->
                          <figure class="position-absolute right-0 bottom-0 w-15 ie-double-ellipse-bottom-right">
                            <img class="js-svg-injector" src="../../assets/svg/components/double-ellipse-bottom-right.svg" alt="Image Description"
                                 data-parent="#SVGDivider2">
                          </figure>
                          <!-- End SVG Bottom Right Shapes -->

                          <!-- SVG Bottom Shape -->
                          <figure class="position-absolute right-0 bottom-0 left-0">
                            <img class="js-svg-injector" src="../../assets/svg/components/curved-1.svg" alt="Image Description"
                                 data-parent="#SVGDivider2">
                          </figure>
                          <!-- End SVG Bottom Shape -->
                        </div>
                        <!-- End SVG Divider -->
                      
                    
                      
                        <!-- JS Implementing Plugins -->
                        <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

                        <!-- JS Front -->
                        <script src="../../assets/js/components/hs.svg-injector.js"></script>

                        <!-- JS Plugins Init. -->
                        <script>
                          $(document).on('ready', function () {
                            // initialization of svg injector module
                            $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                          });
                        </script>
                      
                    

We help building brands

Building brands people can't live without is how our clients grow.

Hire Us
                      
                        <!-- SVG Divider -->
                        <div class="d-lg-flex align-items-lg-center position-relative gradient-half-primary-v1 height-lg-100vh">
                          <div class="d-none d-lg-block bg-img-hero position-absolute top-0 right-0 left-0 height-lg-100vh" style="background-image: url(../../assets/img/bg-shapes/bg1.png);"></div>
                          <div class="container space-2 space-lg-3">
                            <div class="w-lg-50">
                              <div class="mb-7">
                                <h1 class="text-white font-weight-normal">
                                  We help building brands
                                </h1>
                                <p class="lead text-white-70">Building brands people can't live without is how our clients grow.</p>
                              </div>

                              <a class="btn btn-white btn-wide text-primary transition-3d-hover" href="../pages/hire-us.html">Hire Us</a>
                            </div>
                          </div>
                        </div>
                        <!-- End SVG Divider -->
                      
                    

Welcome to Front theme

Image Description
                      
                        <!-- SVG Divider -->
                        <div id="SVGdivider4" class="svg-preloader position-relative text-center gradient-overlay-half-info-v1 bg-img-hero overflow-hidden space-2 space-lg-3" style="background-image: url(../../assets/img/1920x800/img10.jpg);">
                          <h1 class="text-white">Welcome to Front theme</h1>

                          <!-- SVG Background -->
                          <figure class="position-absolute right-0 bottom-0 left-0 z-index-n1">
                            <img class="js-svg-injector" src="../../assets/svg/components/wave-1-bottom-sm.svg" alt="Image Description"
                                 data-parent="#SVGdivider4">
                          </figure>
                          <!-- End SVG Background -->
                        </div>
                        <!-- End SVG Divider -->
                      
                    
                      
                        <!-- JS Implementing Plugins -->
                        <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

                        <!-- JS Front -->
                        <script src="../../assets/js/components/hs.svg-injector.js"></script>

                        <!-- JS Plugins Init. -->
                        <script>
                          $(document).on('ready', function () {
                            // initialization of svg injector module
                            $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                          });
                        </script>
                      
                    

Got a project for us?

We help brands and platforms turn big ideas into beautiful digital products and experiences.

Image Description
Image Description
                      
                        <!-- SVG Divider -->
                        <div id="SVGDivider5" class="svg-preloader position-relative gradient-half-primary-v1 z-index-2 overflow-hidden">
                          <div class="container space-2 space-lg-3">
                            <div class="w-md-80 w-lg-50 text-center mx-md-auto">
                              <h1 class="text-white">Got a project for us?</h1>
                              <p class="lead text-white-70">We help brands and platforms turn big ideas into beautiful digital products and experiences.</p>
                            </div>
                          </div>

                          <!-- SVG Background Shapes -->
                          <div class="w-100 w-sm-75 w-md-50 content-centered-y z-index-n1 ml-9">
                            <figure class="ie-bg-elements-2">
                              <img class="js-svg-injector" src="../../assets/svg/components/bg-elements-2.svg" alt="Image Description"
                                   data-parent="#SVGDivider5">
                            </figure>
                          </div>
                          <!-- End SVG Background Shapes -->

                          <!-- SVG Bottom Shape -->
                          <figure class="position-absolute right-0 bottom-0 left-0">
                            <img class="js-svg-injector" src="../../assets/svg/components/wave-4-bottom.svg" alt="Image Description"
                                 data-parent="#SVGDivider5">
                          </figure>
                          <!-- End SVG Bottom Shape -->
                        </div>
                        <!-- End SVG Divider -->
                      
                    
                      
                        <!-- JS Implementing Plugins -->
                        <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

                        <!-- JS Front -->
                        <script src="../../assets/js/components/hs.svg-injector.js"></script>

                        <!-- JS Plugins Init. -->
                        <script>
                          $(document).on('ready', function () {
                            // initialization of svg injector module
                            $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                          });
                        </script>
                      
                    

Front business

Install Front on your own infrastructure

Image Description
Image Description
                      
                        <!-- SVG Divider -->
                        <div id="SVGDivider6" class="svg-preloader position-relative gradient-half-primary-v5 z-index-2 overflow-hidden">
                          <div class="container space-top-2 space-md-3">
                            <div class="w-md-80 w-lg-50 text-center mx-md-auto mb-9">
                              <h1 class="display-4 font-size-md-down-5 text-white">Front business</h1>
                              <p class="lead text-white-70">Install Front on your own infrastructure</p>
                            </div>
                          </div>

                          <!-- SVG Bottom Shape -->
                          <figure class="position-absolute right-0 bottom-0 left-0">
                            <img class="js-svg-injector" src="../../assets/svg/components/irregular-shape-1-bottom.svg" alt="Image Description"
                                 data-parent="#SVGDivider6">
                          </figure>
                          <!-- End SVG Bottom Shape -->

                          <!-- SVG Background Element -->
                          <figure class="position-absolute top-0 right-0 left-0 z-index-n1">
                            <img class="js-svg-injector" src="../../assets/svg/components/bg-elements-9.svg" alt="Image Description"
                                 data-parent="#SVGDivider6">
                          </figure>
                          <!-- End SVG Background Element -->
                        </div>
                        <!-- End SVG Divider -->
                      
                    
                      
                        <!-- JS Implementing Plugins -->
                        <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

                        <!-- JS Front -->
                        <script src="../../assets/js/components/hs.svg-injector.js"></script>

                        <!-- JS Plugins Init. -->
                        <script>
                          $(document).on('ready', function () {
                            // initialization of svg injector module
                            $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                          });
                        </script>
                      
                    
Contact Us