31:T872,svg` `32:T7c6,{ let opacityPercentage = 0.2, svgWidth = 500, svgHeight = 150, rectWidth = 200, rectHeight = 50, rectY = 45, firstStopX = Math.round(svgWidth * opacityPercentage), lastStopX = svgWidth - firstStopX, stops, opacityCase let svg = d3.select(DOM.svg(svgWidth, svgHeight)) .style('border', '1px solid #caf9b6') svg.selectAll('line') .data([firstStopX, lastStopX]) .enter() .append('line') .attr('x1', d => d) .attr('x2', d => d) .attr('y1', 0) .attr('y2', svgHeight) .attr('stroke', '#caf9b6') let linearGradient = svg.append('linearGradient') .attr('id', 'opacity-gradient') .attr('x1', '0%') .attr('x2', '100%') .attr('y1', '0%') .attr('y2', '0%') if (rectX < firstStopX && rectX + rectWidth > lastStopX) { let percent = ((firstStopX - rectX) / rectWidth) * 100 let percent2 = ((lastStopX - rectX) / rectWidth) * 100 stops = [0, percent, percent2, 100] opacityCase = 1 } else if (rectX < firstStopX) { let percent = ((firstStopX - rectX) / rectWidth) * 100 stops = [0, percent, 100] opacityCase = 2 } else { let percent = ((lastStopX - rectX) / rectWidth) * 100 stops = [0, percent, 100] opacityCase = 3 } linearGradient.selectAll('stop') .data(stops) .enter() .append('stop') .attr('offset', d => d + '%') .attr('stop-color', '#ff7096') .attr('stop-opacity', (d, i) => { if (opacityCase == 1) { return d == 0 || d == 100 ? 0 : 1 } else if (opacityCase == 2) { return d == 0 ? 0 : 1 } else { return d == 100 ? 0 : 1 } }) svg.append('rect') .attr('x', rectX) .attr('y', rectY) .attr('width', rectWidth) .attr('height', rectHeight) .attr('fill', () => { return 'url(#opacity-gradient)' }) return svg.node() }33:[] 2f:{"title":"","cells":[{"id":0,"value":"svg`\n \n `","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"md `## fading effect at start and end of a rect if rect touches svg's start or end`","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"viewof rectX = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}