CODEWITHSUNDEEP
javascriptsvgd3.js
sakurashinken
sakurashinken

Reputation: 4080

How to create shaded path in d3 and SVG?

I am creating a chart with shading effects and would like to have a line graph with an effect similar to this one from Apple's Health kit, except without the sharp vertical line after the last data point. Essentially I want shading below a line that is the shape of the line,rather like a very blurry drop shadow. How could this be achieved in d3?

Upvotes: 0

Views: 593

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

In addition to the graph line, you will need to create a polygon which you place behind the line. Give that polygon a linear gradient. The gradient colour is white and varies from semitransparent at the top to totally transparent at the bottom.

Demo below. I'll leave you to convert this to d3.

    <svg width="750" height="384">
      <defs>
        <!-- The below-the-graph gradient fill -->
        <linearGradient id="grad" x2="0" y2="1">
          <stop offset="0%" stop-color="white" stop-opacity="0.5"/>
          <stop offset="100%" stop-color="white" stop-opacity="0"/>
        </linearGradient>

        <filter id="blur">
          <feGaussianBlur stdDeviation="10" />
        </filter>
      </defs>

      <!-- The orange background -->
      <rect x="10" y="10" width="734" height="368" rx="14" fill="#ff7744"/>

      <!-- This transform just moves the graph from the origin (top left) onto the orange background -->
      <g transform="translate(80,134)">

        <!-- Same shape as the graph but adds points at bottom right and bottom left to complete the polygon -->
        <polygon fill="url(#grad)" filter="url(#blur)"
                 points="0,127, 90,85, 180,115, 270,47, 360,143, 450,0
                         450,177, 0,177"/>

        <!-- The white graph line goes last (on top) -->
        <polyline fill="none" stroke="white" stroke-width="3"
                  points="0,127, 90,85, 180,115, 270,47, 360,143, 450,0"/>
      </g>
      
    </svg>

Update

Sorry, I must have missed your point about blurring the gradient under the line. I've added a bit of blur to my example to show you what a blur filter can do. It is just a quick hack and you can see how it bleeds above the line. To fix that you would need to make a mask or clip-path to mask out the area above the line, so that bleed is not visible.

Upvotes: 2

Related Questions