opacity vs. fill-opacity example

100%

opacity vs. fill-opacity example

✓ Published0🌍 Public

Last edited Jun 20, 2017

Created on Jun 20, 2017

This example demonstrates the visual difference between SVG opacity attributes by placing three circles with distinct transparency settings side by side. It shows how `fill-opacity` affects only the fill color, while `opacity` fades the entire element including its stroke, and how combining `fill-opacity` with `stroke-opacity` allows independent control of fill and stroke transparency. Built with D3 v4, the code appends circles and reference lines to an SVG, using attributes like `attr("fill-opacity", "0.5")` and `style("stroke", "Red")` to style each element. Additional polylines and lines illustrate stroke properties such as `stroke-linecap` and `stroke-linejoin`, with hover effects defined via CSS on the `.dot` class.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/696596b6cf8a7932884ad0ef72928f16'>text example</a>

forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/8a2bcd867fccf7394c5c149e53b0d9e2'>transform, translate example</a>

forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/e2fc6c90c9d38cc6ae19f6dda8759310'>transform, scale example</a>

forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/87187327885c9f235217daa23e2f7a57'>transform, scale example</a>

forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/4d951e9b64c4dd1ad021307864e8b124'>transform, scale example</a>

forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/7e9397a80add2f981127f0461dca2e87'>textLength, spacingandglyphs example</a>

mit Licensed

Similar vizzes

Loading thumbnail…

practice 1 - Circle overlap or opacity check

This example demonstrates how overlapping circles interact through stroke and fill opacity in D3.js. It displays a series of concentric circles with varying radii and colors, drawn as empty strokes with a fixed width, alongside solid red circles that test opacity effects. A second pair of offset circles illustrates overlap at a different position. The visualization uses D3's selection API to bind data to SVG circle elements, setting radius, position, stroke, and fill attributes directly.

NNita

76% match

Loading thumbnail…

Venn Diagram with Opacity

Three overlapping circles form a Venn diagram, with each pair and the central triple intersection visible through translucent fills. The example shows how fill-opacity creates blended regions where circles overlap, using brown, steelblue, and green semi-transparent colors. The code draws static SVG circles via d3.select and append, setting explicit cx, cy, and r coordinates and applying style("fill-opacity", ".5") to each circle. No interaction or dynamic data is involved; the visualization relies solely on SVG styling to communicate set relationships.

Mmbostock

73% match

Loading thumbnail…

Change objects opacity

Five orange circles in a row share the same fill color, and their opacity changes uniformly when a range slider is dragged. The example demonstrates a simple linked interaction between an HTML input control and SVG circle elements. Using D3 v4, the slider’s `input` event triggers a `transition` on all circles, easing their opacity over one second to match the slider’s value divided by 100. The code selects the circles with `svg.selectAll('circle')` and updates their style property, while the static SVG circles are generated with hardcoded positions and radii, and no external data source is used.

EEfratVil

73% match

Loading thumbnail…

practice 1 - Circle overlap or opacity check

A circle-overlap visualization arranges ten concentric circles of increasing radius along a diagonal, each filled with a distinct color and outlined in black, to test how opacity reveals underlying shapes. The SVG rendering, created with D3 v5, uses `select` and `append` to add `<circle>` elements from an array of radius and color objects, with the data reversed before binding. The group containing the circles is scaled by 1.5 via a transform attribute, while each circle’s position and size are set directly from its radius value. This example demonstrates basic D3 data joins and SVG attribute manipulation.

NNita

71% match

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

Shapes and colors transition between transparent and opaque states, with SVG elements responding to hover. Static circles and rectangles demonstrate inherited fill and stroke properties, while a JavaScript-generated path uses relative line commands to construct a polyline. The example applies SVG and CSS, using `getAttribute` and `setAttribute` to modify the path’s `d` attribute, alongside CSS transitions on `opacity` and `stroke-width` for interactive feedback.

Sserebryanaya.n@gmail.com

71% match

Loading thumbnail…

Fork of Fill & Stroke

This example demonstrates the visual contrast between filled and stroked SVG shapes—a rectangle, circle, and triangulated path each appear twice, once with solid fill and once with a white fill and black stroke. The rendering uses raw SVG elements (`<rect>`, `<circle>`, `<path>`) within an inline `<svg>` tag, with a white background rectangle. No JavaScript libraries are employed; the geometry is defined statically in the markup, and the path coordinates are hardcoded. The piece shows how fill and stroke alter the perception of identical forms.

AAdriana Giraldo

70% match

Loading thumbnail…

Fill & Stroke

This example demonstrates the visual difference between shapes with no fill or stroke and those with explicit white fill and black stroke. It uses raw SVG elements—`rect`, `circle`, and `path`—within an inline `<svg>` tag, with a white background rectangle covering the canvas. The top row shows unadorned shapes, while the bottom row applies `fill="white"` and `stroke="black"` with a thick `stroke-width` to highlight the contrast. The code is plain HTML/SVG, with no external libraries, and renders directly in the browser.

MMadhu

70% match

Loading thumbnail…

Fill & Stroke

This example demonstrates the difference between SVG shapes with default fill and stroke rendering and shapes with explicit white fills and black outlines. The top row shows rectangles, circles, and paths filled with black by default, while the bottom row applies white fill and a 12-pixel black stroke to identical shapes. A small arrow-like path appears within one shape to show layered fills. The visualization uses raw SVG elements defined directly in HTML, with no external libraries.

CCurran Kelleher

70% match