Css to create circle

100%

Css to create circle

✓ Published0🌍 Public

Last edited Feb 6, 2020

Created on Feb 6, 2020

This example demonstrates how to create geometric shapes using only CSS, showing a grey circle for a head and a white circle for an eye positioned on a web page. The rendering relies on CSS styling applied to HTML div elements, with absolute positioning and border-radius properties used to achieve the circular forms. The code defines two styled elements, .head and .eyeLeft, within a plain HTML document, utilizing CSS’s border-radius: 50% to transform rectangular divs into perfect circles. No JavaScript libraries or data sources are used; the visualization is purely static CSS composition.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

HTML_CSS_SVG_face

This example shows a simple SVG face rendered as a grey circle on an HTML page. The code uses plain HTML and CSS, with the circle drawn via an SVG `<circle>` element that has a radius of 100. A minimal inline `style` attribute sets the page background, while the SVG itself is unstyled beyond the geometric definition. The demonstration highlights how basic SVG shapes can be embedded directly in HTML without additional libraries or JavaScript, serving as a starting point for interactive visualizations.

SSreedhar K

75% match

Loading thumbnail…

First HTML

This example displays a single brown circle centered on a purple-outlined SVG canvas, demonstrating the foundational structure of an HTML page that integrates CSS and inline SVG markup. The circle is drawn directly using the SVG `<circle>` element with explicit `cx`, `cy`, and `r` attributes, and styled through SVG presentation attributes for fill and stroke. No JavaScript or external libraries are involved; the page relies solely on native HTML, CSS for margin and overflow reset, and JavaScript’s capability to render SVG within the browser, fulfilling the bare-minimum setup for a web-based visualization.

CClioTang

75% match

Loading thumbnail…

Circles

A single grey SVG canvas displays one yellow circle centered within a red-bordered frame. The circle is drawn using the SVG `<circle>` element with a green stroke and a radius of 200 pixels, positioned relative to the canvas width and height. The example demonstrates basic SVG shape rendering in a plain HTML page using CSS for styling and inline SVG markup, with no JavaScript libraries or frameworks involved.

AAlim Bolar

74% match

Loading thumbnail…

Hello HTML

This example demonstrates a minimal web page that renders a single SVG circle on a gray background. It uses plain HTML with inline CSS to set the page margins and overflow, while an SVG element with width and height attributes contains a circle with a radius of 200 pixels. The page also includes a reference to an external JavaScript file that logs a message to the console, though no dynamic behavior is applied to the graphic itself. The rendering relies solely on the browser’s native SVG support and basic CSS styling, with no additional libraries or data sources involved.

PPiotr Paszek

74% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic shapes using SVG and style them with CSS. The visualization renders a single circle inside an SVG container, and a linked stylesheet applies visual formatting to the shape. The code uses React with SVG elements, and the styling is handled through a separate CSS file. The example shows a minimal approach to combining SVG markup with CSS for shape customization in a web page.

SShweta-tech

74% match

Loading thumbnail…

Hello HTML

This example demonstrates the simplest possible web page, rendering a single circle inside an SVG element. It uses a raw HTML file with embedded CSS and JavaScript to reset the body margins and hide overflow. The circle’s cx attribute is mistakenly set to the string “960/2”, so it does not compute the intended center coordinate, leaving the circle in its default position. The page relies on inline styles and no external libraries, serving as a minimal starting point for web-based visualization with SVG.

JJeysri21

74% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes—circles and rectangles—using SVG elements styled directly and through CSS classes. It shows how fill colors, stroke properties, and transforms can be defined inline or via a stylesheet to control appearance. The code uses raw SVG markup within an HTML document, leveraging the `circle`, `rect`, `line`, and `path` APIs, with CSS rules in `style.css` applying stroke styling to a group of lines.

Yyuanwanttoeat

74% match

Loading thumbnail…

test

This example demonstrates a minimal SVG-based circle rendered on a webpage using plain HTML and CSS, with no JavaScript. It shows a single large circle positioned near the top-left corner of the viewport, styled with a centered message in the page body via CSS. The code uses raw SVG elements within an HTML document, defining a circle with explicit `cx`, `cy`, and `r` attributes. The layout relies on default SVG scaling and CSS text styling, producing a static, non-interactive visualization without any data sources or charting libraries.

00xPi

74% match