Skip to main content
SimilarExport ZIP
100%

Wagon

✓ Published0🌍 Public
SSam Hege
Last edited Jun 23, 2022
Created on Jun 22, 2022
Forked from HTML Starter

This example demonstrates a simple animated wagon built from SVG shapes, combining red rectangular body segments with rotating circular wheels. The wheels are created using HTML div elements styled with CSS, where each wheel contains six line spans that rotate at 60-degree intervals to form spokes. The SVG rendering includes repeated rect elements for the wagon bed, while CSS animations drive the wheel rotation continuously. The piece serves as a hands-on exercise in combining SVG primitives with CSS animations and transforms to create a playful, moving illustration.

AI-generated description

A demonstration of SVG shapes. Practice, Practice, Practice.

MIT Licensed

Similar vizzes

Loading thumbnail…

Wagon_2

Two wagon wheels rotate continuously on a blank page, each built from a circular black border and six spoke lines radiating from its center. The left and right wheels spin independently in opposite positions on the screen, using CSS `@keyframes` animation with an infinite linear spin of 360 degrees over three seconds. Each wheel’s spokes are styled divs positioned with `transform: rotate()` increments of sixty degrees, leveraging the `nth-of-type` selector to arrange them. The example relies solely on HTML and CSS, with no JavaScript or external libraries.

SSam Hege
77% match
Loading thumbnail…

Fork of New template

This example shows an interactive truck built from SVG shapes: a red body, blue cabin, white window, yellow headlight, and two black wheels. Clicking the truck triggers a two-second animation that translates it to the right, and the wheels rotate 720 degrees around their centers. The code uses D3.js v7 to select the SVG container, append shape elements, and animate the truck’s movement and wheel spinning with a transition and `attrTween`.

Vvenigallajaanu@gmail.com
71% match
Loading thumbnail…

truck for kids

Built with D3.js v7, this example draws a cartoon truck as an SVG composition of rectangles and circles, including a red body, blue cabin, white window, yellow backlight, and two black wheels. Clicking the truck triggers a two-second `transition` that translates the entire group horizontally across the canvas, while the wheels rotate 720 degrees via `transition.attrTween` and `d3.interpolateString`. The wheels spin independently during the movement, and repeated clicks restart the animation, making the truck advance slowly across the gray-bordered SVG stage. It demonstrates reusable transition chaining on grouped SVG elements.

Vvenigallajaanu@gmail.com
70% match
Loading thumbnail…

TD_SVG FUndamentals

This example demonstrates fundamental SVG shapes and animation within a single static HTML page. A green rectangle acts as the background and spins via an `animateTransform` rotation while its corner radius animates through an `animate` element. Overlaid on this are a blue line and three concentric circles in red, yellow, and green. The rendering uses raw SVG markup within `index.html`, with animation driven by native SVG animation elements rather than external libraries.

TTatjana Dzambazova
69% match
Loading thumbnail…

Fork of SVG shapes and animation sandbox

This example is a sandbox for playing with SVG shapes and animations. It depicts a colorful landscape of layered blue rectangles forming a stylized sky, with two distinct cloud groups moving along animated paths. A single pink flower is drawn with SVG paths and circles. The animation is built using SVG’s built-in `<animateMotion>` element to move the clouds over time, while the static shapes are defined with basic SVG primitives like `<rect>`, `<circle>`, `<ellipse>`, and `<path>`.

Wwasti
69% match
Loading thumbnail…

HTML cars report

This example creates a small, schematic car made of SVG shapes: two stacked circles serve as wheels, a rectangle forms the chassis, and lines and a path outline the body. The visualization is static and does not include interactive or animated behavior despite its title. The rendering uses SVG within HTML, with styling defined in a separate stylesheet. The code imports `select` from D3.js only to set a text message in a separate div, which is unrelated to the car graphic. The drawing relies on basic SVG elements and CSS classes without any data binding or computational layout.

Ccguibourg
69% match
Loading thumbnail…

W1 SVG essentials

This example demonstrates basic SVG shape layering and symmetry. A series of overlapping red and white circles creates three target-like forms across the canvas, with white vertical rectangles and diagonal line segments adding structure on either side. The piece also includes a black path using relative lineto commands. Pure SVG, rendered directly in HTML.

MMadhu
68% match
Loading thumbnail…

Shapes with SVG and CSS

A car inventory report visualizes vehicle data using basic geometric shapes. Circles and rectangles represent car models, with color coding distinguishing attributes: a red circle, a green rectangle, and blue shapes with black outlines. The rendering uses SVG elements directly in HTML, with CSS classes applying styling like red text highlights and stroke properties. Transformations scale and translate the shapes, while line and path elements add simple connector graphics. The example demonstrates manual SVG construction without a JavaScript library, relying on inline markup and stylesheet rules for presentation.

WWai Kit Tsang
68% match