create a curved sidebar for user dashboard background
I would like to create a curved side bar for my dashboard panel. I’ve tried 2 ways:
- create a svg and path: that result was not good at all.
- create with js: the result was good but it was rasterized 😐
const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // Quadratic Bézier curve ctx.beginPath(); ctx.moveTo(280, 0); ctx.quadraticCurveTo(240, 90, 270, 150); ctx.lineTo(320, 320); ctx.lineTo(320, 0); ctx.fillStyle = "#0984e3"; ctx.fill(); // const hes = document.getElementById('hesam'); const ctxx = canvas.getContext('2d'); // Quadratic Bézier curve ctxx.beginPath(); ctxx.moveTo(281, 0); ctxx.quadraticCurveTo(240, 90, 280, 150); ctxx.lineTo(320, 320); ctxx.lineTo(320, 0); ctxx.fillStyle = "#74b9ff"; ctxx.fill();#canvas { width: 100%; height: 100%; position: absolute; float: right; } #hesam { width: 100%; height: 100%; position: absolute; float: right; }<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale="> <title></title> </head> <body> <canvas id="canvas"></canvas> <canvas id="hesam"></canvas> </body> </html>https://codepen.io/hessamr/pen/vYLzePX
How can I have this result with vectorized and have quality to use bg of a side bar.
