the shape divider is a great web tool for making these layouts. I was following fireships tutorial. I like this juicy emmet shortcut he uses to auto generate the sections html really quickly:
section*8>(h1>{Nice Curves})+p>lorem
this tool removes alot of generated junk that vector programs include in your svg. This lets you get the file size down a bit more before you embed them in your page. With it I was able to shrink my logo by 68% from 6 to 4kb.
svg backgrounds.com has this tool that takes the first steps further by converting it to css you can add inline. matt visiwig, the creator of the tool explains it here.
you can use it with: