Pulsar Tools
Dividers
The divider between two sections of a landing page. Waves, curves, slants, zigzags and torn edges, stretchable to any width, with parallax layers.
.divider { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; }
.divider svg { display: block; width: 100%; height: 100%; }
/* or as a background: */
.divider-bg { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20120%22%20width%3D%221440%22%20height%3D%22120%22%20role%3D%22img%22%20preserveAspectRatio%3D%22none%22%3E%3Ctitle%3ESection%20divider%3C%2Ftitle%3E%3Cpath%20d%3D%22M0%20120L0%2063.5L15%2061.9L30%2060.8L45%2060.1L60%2060L75%2060.4L90%2061.3L105%2062.7L120%2064.5L135%2066.8L150%2069.5L165%2072.6L1…1440 × 120, 1.1 KB as SVG.
The same seed always draws the same thing. Share the link and a colleague sees this exact asset.
Shape
120px
Waves, peaks, bumps, steps or zigzags across the width
Centred
One solid shape
Edge
Mirror
Cut