Sail race illustration svg

by PhilQ

HTML

<!-- https://flatuicolors.com/palette/de -->
<div id="app">
	<svg width="500" height="700">
		<defs>
			<pattern id="ll_port"
					 width="20" height="10"
					 patternUnits="userSpaceOnUse"
					 patternTransform="rotate(40 50 50)">
				<line stroke="#3867d6" stroke-width="2px" y2="10"/>
			</pattern>
			<pattern id="ll_sb"
					 width="20" height="10"
					 patternUnits="userSpaceOnUse"
					 patternTransform="rotate(-40 50 50)">
				<line stroke="#3867d6" stroke-width="2px" y2="10"/>
			</pattern>
			<mask id="starting_box" x="0" y="0" width="100%" height="100%"
				  _maskContentUnits="objectBoundingBox">
				<g :transform="'translate(' + pin.x + ',' + pin.y + ')'">
					<rect x="0" y="0" :width="committee.x - pin.x" :height="2 * boat.length" transform="skewX(40)" fill="white" />
				</g>
			</mask>
			<pattern id="starting_box_stripes"
					 width="20" height="10"
					 patternUnits="userSpaceOnUse"
					 patternTransform="rotate(40 50 50)">
				<line stroke="#3867d6" stroke-width="20px" y2="10"/>
			</pattern>
			<g id="mark">
				<circle cx="0%" cy="0%" :r="(2 * boat.length)" fill="#fa8231" fill-opacity="0.15" stroke="#fa8231" stroke-opacity="0.8" stroke-width="1" stroke-dasharray="5,5"></circle>
				<circle cx="0%" cy="0%" r="6" fill="#fa8231"></circle>
			</g>
			<svg id="committee_boat" viewBox="0 0 55.223 100" preserveAspectRatio="xMinYMin meet" style="overflow: visible;">
				<path fill="#eb3b5a" d="M-14.928,41.838h29.853v2.728C15.17,45.695,19.248,50,21.268,50 c2.019,0,6.08-4.305,6.344-5.435v-62.839C25.569-34.737,9.486-49.691,9.486-49.691S7.391-50-0.001-50 c-7.39,0-9.488,0.309-9.488,0.309s-16.083,14.954-18.122,31.417v62.839C-27.348,45.695-23.29,50-21.271,50 c2.021,0,6.099-4.305,6.342-5.435V41.838z"/>
			</svg>
		</defs>

		<g id="laylines" style="opacity: 0.1;">
			<rect width="100%" height="100%" fill="url(#ll_port)" />
			<rect width="100%" height="100%" fill="url(#ll_sb)" />
		</g>
		
		<g style="mask: url(#starting_box);" opacity="0.3">
			<rect...

SCSS

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i&display=swap');

body {
	background: #20262E;
	padding: 20px;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 18px;
}

#app {
	background: #fff;
	border-radius: 4px;
	padding: 20px;
	transition: all 0.2s;
	text-align: center;
}

svg {
	background: rgba(69, 170, 242, 0.2);
}

Vue

new Vue({
  el: "#app",
  data: {
  	boat: {
		length: 20,
	},
	committee: { x: 320, y: 600 },
	pin: { x: 180, y: 600 },
	marks: [
		{ x: 220, y: 80 },
		{ x: 280, y: 80 },
		{ x: 220, y: 500 },
		{ x: 280, y: 500 },
	],
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ]
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  }
})