Tianming Liu

@Tianming-Liu·3 public vizzes

JS Basic

This example demonstrates a minimal HTML page that uses JavaScript to create and position an SVG circle element on the page. The code initializes an SVG container, appends a circle, and sets its center coordinates to (200, 300), though it does not currently display the circle in the browser. The example showcases basic DOM manipulation and SVG creation using vanilla JavaScript, with CSS styling applied to a message class for text formatting. It serves as a foundational introduction to combining HTML, CSS, and JavaScript for web visualization.

Dec 22, 2023

Loading thumbnail…

Fork of HTML Starter

This example displays the text "My Text" centered within an SVG canvas, using a custom font loaded from Google Fonts. The text renders in white with a black outline, and hovering over it triggers a three-second CSS transition that inverts the colors and shadow to black with a white outline. The visualization is built with a plain HTML page, inline CSS for styling and hover effects, and an SVG `<text>` element for the core rendering.

Dec 21, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape and styling fundamentals using two circles with contrasting fills and stroke settings. One circle uses a black fill with black stroke and a CSS transition that enlarges its stroke width on hover over three seconds, while the second circle displays a grey fill with a white stroke of fixed five-pixel width. The code directly constructs SVG elements and applies CSS styling to the first circle.

Dec 20, 2023