sk — VizHub

100%

sk

✓ Published0🌍 Public

Last edited Mar 8, 2023

Created on Mar 8, 2023

This example demonstrates an input field that formats numeric values as decimals with a period as the group separator, supporting values up to 999,999. It uses the Inputmask library to apply the decimal masking directly to a DOM element selected via `document.getElementById`. The page consists of a minimal HTML structure with a single input element, initialized by JavaScript that invokes `Inputmask('decimal', ...)` and chains the `.mask()` method to enforce the formatting behavior.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

create mask

This example uses an SVG mask to create a circular window over a series of alternating horizontal rectangles. The mask, defined with an SVG `<mask>` element containing a white circle, is applied to each of the 100 rectangles via the `mask` attribute. The visualization demonstrates how SVG masks work in a bare-bones HTML page using vanilla JavaScript, dynamically creating the SVG elements and filling the viewport.

AAkshay

55% match

Loading thumbnail…

Currency Pattern for text input (US)

This example demonstrates a US currency input field that uses an HTML pattern attribute to validate dollar amounts. It shows how a regular expression restricts user input to acceptable formats, including an optional dollar sign, commas for thousands separators, and up to two decimal places. The code defines a single `<input>` element of type `text` with an ID of `dollarAmount`, applying the `pattern` attribute for validation and a `title` attribute to provide a custom error message. No JavaScript libraries or frameworks are used; the rendering relies entirely on native HTML5 form validation behavior.

LLucyI

55% match

Loading thumbnail…

Input Range with react

This example demonstrates a React component that combines a range slider and a dropdown menu to control a numeric value. It shows how React state manages the selected value, which is displayed as text. The code uses React's `useState` hook to store the input value and passes it back to the `RangeInput` component via props. The `RangeInput` component renders an HTML `<input type="range">` element, while the `Dropdown` component renders a `<select>` element, both triggering state updates through `onSelectedValueChange`. ReactDOM renders the main `App` component to the root element.

AAdriana Rodriguez Sanabria

54% match

Loading thumbnail…

circle mask

A full-screen SVG displays 100 horizontal stripes alternating in height across the viewport, with a circular mask revealing only the central region. The mask is defined as an SVG `<mask>` containing a white rectangle and a black circle, applied to each stripe via the `mask` attribute. The visualization uses raw DOM manipulation with `document.createElementNS` and `setAttribute` to construct the SVG elements dynamically in JavaScript, without any external libraries.

AAkshay

54% match

Loading thumbnail…

Learn D3

This example demonstrates how SVG masks can create a striking visual composition using only rectangles and circles. It renders 100 horizontal and 100 vertical thin rect elements across the full viewport, with each set masked by a circular aperture defined via native SVG `mask` elements. The first mask uses a white circle on a black background, while the second inverts the colors to alternate visibility between the two rectangle sets. No D3 library calls appear in the code; instead, it relies on `document.createElementNS` and `setAttribute` for all SVG construction, making it a pure vanilla JavaScript and SVG demonstration.

MMark Christian

54% match

Loading thumbnail…

DOM Manipulation

This example demonstrates how to dynamically create an SVG scene using only native JavaScript DOM manipulation methods, without any external libraries. It generates a grid of red and black rectangles, then applies a circular mask to reveal a striking circular composition at the center of the viewport. The code uses `document.createElementNS` and `setAttribute` to construct SVG elements, including a mask, circle, and rects, with dimensions determined by the window size. The result is a minimalist, geometric pattern that highlights the power of direct SVG element creation and styling.

Cclara7227

53% match

Loading thumbnail…

multi masks

This example creates an abstract pattern of 100 horizontal and 100 vertical stripes overlaid on an SVG canvas, with each stripe masked by one of two complementary masks. The masks are defined using D3’s `mask` element, where black and white rectangles and symbol shapes (from `d3.symbol`) determine visibility. The code uses D3 selections and `join` to bind data from `d3.range`, and applies masks via `attr('mask', 'url(#mask-1)')`. The result is a woven, crosshatched visual effect generated entirely in the browser.

JJetlinZ

53% match

Loading thumbnail…

Fork of Hello HTML

This example demonstrates how to create a masked SVG visualization using vanilla JavaScript and React. It renders an SVG canvas with a circular mask centered on the screen, then draws a series of vertical rectangles that are clipped by the mask. The code uses the `createElementNS` API to build SVG elements dynamically, along with the `mask` and `rect` elements to achieve the visual effect, with React serving as the framework for the page structure.

PPriyanshu Sahu

53% match