Pen highlighter effect in css

Question

I want to create a highlight effect that resembles a highlight made with a pen. i.e. it has wavy tops and bottoms and a rough start and end, like in this picture.

Answer 1

This answer is closer to the original question:

 
.book-in-quest {
	font-size: 34px;
	letter-spacing: -2.5px;
	font-family: arial;
	line-height: 1.05;
	display: flex;
	flex-wrap: wrap;
	color: #523D13;
}

	.page {
		width:428px;
		height: 453px;
		margin: 20px;
		overflow: hidden;
		// margin-bottom: 50px;
		border-bottom: #846C3C dotted 1px;
}

		blockquote, p {
			padding-bottom: 10px;
		}

		blockquote {
			font-size: 28px;
			margin-top:0;
			margin-bottom:0;
			margin-inline-start: 30px;
		}

		p {
			margin: 0;
	}

			.highlight {
				font-size: 23px;
				background-color:#FFFF66;
				line-height: 23px;
				border-radius: 100px;
}
				.text {
					font-size: 34px;
					font-weight: 700;
				}
 

	

	

	Roberta is creating a statue in honor of T. Schmidt O. Ren and E. Dash, but the photo is too old. She'll need a better picture from Gary to finish the job! an unusual
	

Credit to: https://codepen.io/laurenvast/pen/JmOaNd