JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="500" height="500" xml:space="preserve">
<path d="M 220.5 147 Q 220.5 147 221 147 Q 221.5 147 220.75 147.5 Q 220 148 220 148.5 Q 220 149 220 150 Q 220 151 220.5 152 Q 221 153 221.5 153 Q 222 153 222.5 153.5 Q 223 154 223.5 154.5 Q 224 155 225 156 Q 226 157 226.5 157.5 Q 227 158 228 158.5 Q 229 159 229.5 159.5 Q 230 160 230.5 160.5 Q 231 161 232 162 Q 233 163 233.5 163.5 Q 234 164 234.5 164.5 Q 235 165 236.5 165.5 Q 238 166 238.5 166.5 Q 239 167 239.5 168 Q 240 169 240.5 169.5 Q 241 170 241 170.5 Q 241 171 241 171.5 Q 241 172 241.5 172.5 Q 242 173 242.5 173.5 Q 243 174 243.5 174.5 Q 244 175 244 175.5 Q 244 176 244 176.5 Q 244 177 244.5 178 Q 245 179 245.5 180 Q 246 181 246 181.5 Q 246 182 246 182.5 Q 246 183 246 183.5 Q 246 184 246 185 Q 246 186 246 187 Q 246 188 246 188.5 Q 246 189 246 190 Q 246 191 246 191.5 Q 246 192 246 192.5 Q 246 193 246 193.5 Q 246 194 246 195.5 Q 246 197 246 197.5 Q 246 198 246 198.5 Q 246 199 246 200 Q 246 201 246 201.5 Q 246 202 246 202.5 Q 246 203 246 203.5 Q 246 204 246 205 Q 246 206 246 207 Q 246 208 246 208.5 Q 246 209 246 210 Q 246 211 246 211.5 Q 246 212 246 212.5 Q 246 213 245.5 213.5 Q 245 214 244.5 215.5 Q 244 217 243.5 217.5 Q 243 218 242.5 219 Q 242 220 241.5 221 Q 241 222 240.5 222.5 Q 240 223 239 224 Q 238 225 237.5 225.5 Q 237 226 236.5 226.5 Q 236 227 235.5 227.5 Q 235 228 234.5 229 Q 234 230 233 230.5 Q 232 231 231.5 231.5 Q 231 232 230.5 232.5 Q 230 233 229 233.5 Q 228 234 227.5 234.5 Q 227 235 226.5 235 Q 226 235 225.5 235.5 Q 225 236 224.5 236.5 Q 224 237 223.5 237 Q 223 237 222 237.5 Q 221 238 220.5 238.5 Q 220 239 219 239 Q 218 239 217.5 239.5 Q 217 240 216 241 L 215 242" style="stroke: rgb(0,0,0); stroke-width: 10; stroke-linecap: round; fill: none;"/>
</svg>

CSS

canvas, svg {
    border: 1px dotted magenta;
}