<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container1">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
<svg viewBox="0 0 425 300">
<path id="curve" d="M6,150C49.63,93,105.79,36.65,156.2,47.55,207.89,58.74,213,131.91,264,150c40.67,14.43,108.57-6.91,229-145" />
<text x="25">
<textPath xlink:href="#curve">
Dangerous Curves Ahead
</textPath>
</text>
</svg>
.container1 {
background-color: #00b9ffb0;
width: 100vw;
height: 100vh;
flex: 1;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column
}
.row {
width: 500px;
height: 10px;
background-image: radial-gradient(circle at 5px, #fff 5px, rgba(255,255,255,0) 5px);
background-position: top, right, bottom, left;
background-size: 25px 10px;
background-repeat: repeat-x, repeat-y;
background-repeat-x: repeat, no-repeat;
background-repeat-y: no-repeat, repeat;
margin-top: 20px
}
body {
background-color: #333;
font-family: 'Luckiest Guy', cursive;
font-size: 40px;
}
path {
fill: transparent;
}
text {
fill: #FF9800;
}
