JSFiddle - React, Tailwind, and code Playground

by Tiro

HTML

<svg width="12cm" height="6cm" viewBox="0 0 1200 600"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title>Example quad01 - quadratic BĂ©zier commands in path data</title>
  <desc>Picture showing a "Q" a "T" command,
        along with annotations showing the control points
        and end points</desc>
  <rect x="1" y="1" width="1198" height="598"
        fill="none" stroke="blue" stroke-width="1" />

  <path d="M200,300 Q400,50 600,300 T1000,300"
        fill="none" stroke="red" stroke-width="5"  />
  <!-- End points -->
  <g fill="black" >
    <circle cx="200" cy="300" r="10"/>
    <circle cx="600" cy="300" r="10"/>
    <circle cx="1000" cy="300" r="10"/>
  </g>
  <!-- Control points and lines from end points to control points -->
  <g fill="#888888" >
    <circle cx="400" cy="50" r="10"/>
    <circle cx="800" cy="550" r="10"/>
  </g>
  <path d="M200,300 L400,50 L600,300 
           L800,550 L1000,300"
        fill="none" stroke="#888888" stroke-width="2" />
</svg>

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="66" height="66" viewBox="0 0 300 300">
	<defs>
		<filter id="dropshadow" height="120%">
			<feGaussianBlur in="SourceAlpha" stdDeviation="5" /> 
			<feOffset dx="3" dy="3" result="offsetblur" /> 
			
			<feMerge> 
				<feMergeNode />
				<feMergeNode in="SourceGraphic"/> 
			</feMerge>
	 	</filter>
	</defs>
	<polygon fill="white" fill-opacity=".7" filter="url(#dropshadow)" 
	  points="0,50 50,0 100,50 150,0 200,50 250,0 300,50 250,100 300,150 250,200 300,150 250,200 300,250 
			250,300 200,250 150,300 100,250 50,300 0,250 50,200 0,150 50,100 0,50" />
</svg>
<br>
<svg width="24cm" height="1cm" viewBox="0 0 2400 100"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
         <path d="M0,50 Q 200,-40 400,40 T 800,50 Q 1000,-40 1200,40 T1600,50 "
        fill="none" stroke="gray" stroke-width="3"  />
</svg>
    
<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  
  <path d="M10 80  C 40 10, 65...