body {
	background-color: lightpink;
	background: linear-gradient(45deg, lightpink 0, turquoise 100%);
}

.demo {
	opacity:0;
	max-width:700px;

path {
	stroke-width: 8px;
}

.demo {
	opacity:0;
	max-width:700px;
	
}


#curve {
	stroke: #f39; 
	stroke-width: 8px;
	fill:none;
}



line, rect {
	stroke-width:2px;
	stroke: #f39; 
	stroke-width: 8px;
}

line {
	/* safari needs 300 300 for stroke-dasharray instead of single 300 */
	stroke-dasharray:300; 
	stroke-dashoffset:300;
	stroke:dodgerblue;
}


rect{
	stroke-dasharray: 800;
	stroke-dashoffset:800;
	stroke-linecap: square;
}

.rectangle {
filter: url(#theFilter);
clip-path: polygon(
    50% 0%, 
    61% 35%, 
    100% 35%, 
    68% 57%, 
    79% 91%, 
    50% 70%, 
    21% 91%, 
    32% 57%, 
    0% 35%, 
    39% 35%
  );
}


#heart {
	clip-path: shape(from 50% 91%, line to 90% 50%, arc to 50% 9% of 1%, arc to 10% 50% of 1%);
	clipPathUnits="userSpaceOnUse";
	translate: -100px 0px;
	transform: scale(2);
}