Untitled

100%

✓ Published0🌍 Public

Last edited May 13, 2020

Created on May 13, 2020

Forked from slider

This example demonstrates how a slider controls the size of a pattern-filled circle in an SVG. The circle’s radius stays fixed, but the pattern scale changes as the slider moves between 2 and 40. The code uses the `textures` library to generate the fill, applying it via `t1.size(size)` and `svg.call(t1)`, with updates triggered by the slider’s `change` event. The visualization is rendered using D3 v4 and React, with the SVG drawn at 400 by 200 pixels.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Untitled

This example shows four circles arranged horizontally, each with a fixed radius of 10 pixels. A slider control allows the user to select a value between 2 and 40, and the chosen value is written to the document via `document.write` in the `changeSize` function. The visualization uses d3.v4 to bind an array of X positions to the circles and listens for slider changes with `d3.select("#mySlider").on("change")`. The SVG is rendered directly in the HTML with a fixed width of 400 pixels and height of 200 pixels.

Zzoniyac

86% match

Loading thumbnail…

Fork of slider

This example demonstrates how to adjust the density and size of a textured pattern applied to an SVG rectangle. A native HTML range slider controls the visual property, updating the display in real time. The code uses the `textures` library to generate a circle-based texture pattern via `textures.circles()`, then applies it to the rectangle using D3.js v4’s `selection.attr()`. The SVG is rendered with a fixed width and height, and the slider’s value modifies the texture’s radius, though the density control is currently commented out.

Mmayuri-gosapphire

82% match

Loading thumbnail…

slider

Two range sliders control the density and radius of a procedural circle texture applied to a rectangular SVG shape. Dragging either slider updates a texture generated with the `textures` library, which is then used as the rectangle’s fill via `textures.circles().size()` and `.radius()`. The SVG is rendered with d3.v4, which appends the rectangle to the chart area. Each slider also displays its current numeric value in an accompanying HTML paragraph.

Zzoniyac

81% match

Loading thumbnail…

button

Four buttons cycle a rectangle’s fill through four SVG textures generated by the textures library: circles, lines, crosses, and a custom banana-shaped path. The example demonstrates how to apply texture definitions to an SVG node via `svg.call(t1)`, then update the rectangle’s fill on button click with `changeColor(t.url())`. A slider, wired through `d3.select("#mySlider").on("change", ...)`, adjusts the line texture’s size, though the slider element itself is not defined in the visible markup. All rendering uses D3 v4 and SVG.

Zzoniyac

76% match

Loading thumbnail…

Untitled

This example shows a collection of geometric shapes rendered directly in SVG, including circles of varying radii and colors, a navy line from the origin, and a red path with arc and quadratic curve segments. The code uses plain SVG element syntax within an HTML file, with a commented-out rectangle demonstrating how to toggle shapes. Each shape is positioned explicitly via cx, cy, x, y, and path data attributes, and styling is applied through fill, stroke, and stroke-width properties. The visualization is static, with no interaction or data binding, serving as a bare-bones demonstration of basic SVG drawing primitives in a standalone page.

Zzinthaw

75% match

Loading thumbnail…

dot-size

Five square panels display a progression of dot-size textures, from fine to coarse, demonstrating how changing the radius and stroke width of a repeating circle pattern alters visual density. Each panel is filled using a distinct texture created with the D3 textures library, applied via `svg.call()` and referenced with `texture.url()`. The example uses D3 v5 to construct SVG rectangles, with circles generated programmatically as tiling patterns.

Zzoniyac

74% match

Loading thumbnail…

Untitled

This example shows a single, large circle rendered on a blank SVG canvas, with no interaction or animation. The visualization relies on an inline SVG element sized to 960 by 500 pixels, containing a circle with a radius of 100. The code uses plain JavaScript and CSS within an HTML page, with the SVG’s `circle` element as the only visual mark, and the page is set up with a hidden overflow. No external data or libraries are used, and the styling is minimal, focusing on the bare structure of an SVG graphic.

HHaris Vidimlic

74% match

Loading thumbnail…

Untitled

Three circles of different sizes and colors are rendered in an SVG, each labeled with its corresponding node name and filled with a diagonal stripe pattern. The visualization uses D3 version 3 to bind data from a JSON array containing node positions, radii, labels, and colors. The code appends a pattern definition to the SVG defs and creates two overlapping circles per node: a solid color base and a striped overlay, with text positioned relative to each circle’s radius.

MMokshithabhi

74% match