SVG Drawing Tutorial: Creating the Novem Logo<\/h1>
This custom plot demonstrates how to create custom SVG graphics in Novem using D3.js. It's a complete tutorial for drawing vector graphics in your visualizations.<\/p>

What You'll Learn<\/h2>

SVG Basics<\/strong>: Creating and manipulating SVG elements<\/li>
D3.js Integration<\/strong>: Using D3 to build graphics declaratively<\/li>
Theme Support<\/strong>: Adapting colors for light\/dark modes<\/li>
Responsive Design<\/strong>: Working with dynamic width\/height<\/li>

Animations<\/strong>: Adding interactive transitions<\/li> <\/ol>
Key Techniques<\/h2>
Creating SVG Elements<\/h3>
Use D3.js to select the container and append SVG:<\/p>
const svg = d3.select(node) .append('svg') .attr('width', width) .attr('height', height); <\/code><\/pre> Theme-Aware Colors<\/h3> Access dark mode via render.dark<\/code>:<\/p> const colors = { primary: render.dark ? '#6366f1' : '#4f46e5', text: render.dark ? '#e5e7eb' : '#1f2937' }; <\/code><\/pre> Complex Paths<\/h3> Create custom shapes with SVG path syntax:<\/p> logoGroup.append('path') .attr('d', `M ${x1},${y1} L ${x2},${y2} Z`) .attr('fill', colors.primary); <\/code><\/pre> Conditional Animation<\/h3> Use render.static<\/code> to disable animations for exports:<\/p> if (!render.static) { element.transition() .duration(2000) .attr('opacity', 1); } <\/code><\/pre> SVG Elements Used<\/h2> <path><\/code>: Complex shapes (logo icon)<\/li> <circle><\/code>: Circular backgrounds<\/li> <text><\/code>: Typography<\/li> <line><\/code>: Accent lines<\/li> <rect><\/code>: Bar chart decorations<\/li> <g><\/code>: Grouping with transforms<\/li> <\/ul> Available Libraries<\/h2> This plot uses D3.js v7<\/strong>, which is available by default in all custom plots. Other available libraries include Observable Plot and Ramda.<\/p> Next Steps<\/h2> Try modifying this code to:<\/p> Change colors and styling<\/li> Add more decorative elements<\/li> Create your own logo or icon<\/li> Experiment with different animations<\/li> <\/ul> Full documentation: Novem Custom Plots Guide<\/a><\/p>

SVG Drawing Tutorial: Creating the Novem Logo<\/h1> This custom plot demonstrates how to create custom SVG graphics in Novem using D3.js. It's a complete tutorial for drawing vector graphics in your visualizations.<\/p>

Key Techniques<\/h2>

Available Libraries<\/h2> This plot uses D3.js v7<\/strong>, which is available by default in all custom plots. Other available libraries include Observable Plot and Ramda.<\/p>

Next Steps<\/h2> Try modifying this code to:<\/p> Change colors and styling<\/li> Add more decorative elements<\/li> Create your own logo or icon<\/li> Experiment with different animations<\/li> <\/ul> Full documentation: Novem Custom Plots Guide<\/a><\/p>

SVG Drawing Tutorial: Creating the Novem Logo<\/h1>
This custom plot demonstrates how to create custom SVG graphics in Novem using D3.js. It's a complete tutorial for drawing vector graphics in your visualizations.<\/p>

Available Libraries<\/h2>
This plot uses D3.js v7<\/strong>, which is available by default in all custom plots. Other available libraries include Observable Plot and Ramda.<\/p>

Next Steps<\/h2>
Try modifying this code to:<\/p>

Change colors and styling<\/li>
Add more decorative elements<\/li>
Create your own logo or icon<\/li>
Experiment with different animations<\/li> <\/ul>
Full documentation: Novem Custom Plots Guide<\/a><\/p>