Animating vector graphics from a circle to a line using SVG

Is it possible to convert a circle into a line (path)?
I'm having trouble finding information on how to shape the svg element.

Perhaps my search technique is the issue.

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95.28 95.28">
  <title>circle</title>
  <circle cx="47.64" cy="47.64" r="47.14" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
</svg>

I would prefer if the top and bottom could connect, but I am primarily interested in learning how to achieve this transformation!

--------- UPDATE ----------
I came across this resource which might provide some guidance.

--------- LATEST UPDATE ----------
Attempting this without JQuery seems impossible for me due to lack of skills. Could someone assist with a JQuery solution?

cssanimationsvg

Answer №1

Utilize the animateTransform functions to achieve vertical scaling, transforming a circle into a line. Also, use translate-Y to maintain transformation origin at the center of the circle.

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95.28 95.28">
  <title>circle</title>
  <g>
  <circle cx="47.64" cy="47.64" r="47.14" fill="none" stroke="#1d1d1b" stroke-miterlimit="10">
    <animateTransform attributeName="transform"
    type="scale"
    from="1 1"
    to="1 0"
    begin="0s"
    dur="2s"
    repeatCount="indefinite"
  />
  </circle>
 <animateTransform attributeName="transform"
    type="translate"
    from="0 0"
    to="0 24"
    begin="0s"
    dur="2s"
    repeatCount="indefinite"
  />
  </g>
</svg>

Answer №2

There are times when it's best not to overanalyze things in life.
The solution was actually quite simple, but I ended up complicating it with my thoughts.

A straightforward scale() function worked like magic.

.container{
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

@keyframes shapeshifter {
0% {
transform: scale(1,1);
transform-origin: 50% 50%;
} 
100% {
transform: scale(1,0.01);
transform-origin: 50% 50%;
}
}
.shape{ 
animation: shapeshifter 1s ease-in-out 1 both;
}
<div class="container">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <title>circle</title>
  <circle class="shape" cx="50.109" cy="50.086" r="47.14" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
</svg>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing form elements within a label_tag in Ruby on Rails

I am looking to wrap my text fields and other form elements in a label tag: <label for="response">Tell me what you think: <input type="text" id="response" name="response"/></label> This allows me to apply CSS like the following: label ...

htmlcssruby-on-railsruby-on-rails-3ruby-on-rails-3.2

What methods can I use to display or conceal certain content based on the user's location?

I'm looking to display specific content exclusively to local users. While there are APIs available for this purpose, I'm not sure how to implement them. I'm interested in creating a feature similar to Google Ads, where ads are tailored base ...

javascriptcsshtml

What may be causing the MuiThemeProvider to override the style of a component?

Within my outer component, I am utilizing MuiThemeProvider: <MuiThemeProvider theme={full_theme_e}> <div> <AppBar /> <Filter /> </div> </MuiThemeProvider> Inside the Filter component, I have specified a ...

cssreactjsmaterial-ui

JavaScript - Dynamically loaded CSS: CSS variables are not immediately accessible to JavaScript, but are successfully evaluated within the CSS itself

I am encountering an issue with dynamically loading stylesheets via JavaScript into my application. Within these stylesheets, I have various CSS variables that I need to access and modify from my JavaScript code. When the stylesheets are directly embedded ...

javascripthtmlcsscss-variables

"Troubleshooting the alignment problem in a Bootstrap 5 inline form

I am struggling to create a compact inline form on a web page featuring search filters and two buttons for submitting and resetting. Whenever I position the form fields above the buttons, they become misaligned. How can I ensure that everything stays in- ...

csstwitter-bootstrapbootstrap-5

If one sibling requires flexing, apply flex to all siblings

Illustrative Issue: large: https://i.sstatic.net/oq0jA.png small: https://i.sstatic.net/WXqmV.png When space is limited, one row will start to flex while others remain static if they have enough space. Is there a way to make all rows flex when at least ...

htmlcsssvgflexboxcss-grid

Enhancing the Google Visualization Table with Custom CSS

After creating a table in Google Visualization with the provided code, I am struggling to customize the formatting of the header row and table rows using CSS. Despite going through the Configuration Options, I am unclear on how to proceed and would appreci ...

csswordpressgoogle-visualizationcss-tables

position:fixed - disparities between Firefox and Chrome browsers

I'm currently utilizing the Skeleton boilerplate to craft a responsive design. Here is how it appears in Chrome and Firefox: Chrome: Firefox: Visually, the gray bar intended to be the menu displays correctly in Chrome. My objective is to create a ...

cssmenucss-positionstickyskeleton-css-boilerplate

What is the best way to include CSS code in the output display?

I'm looking to customize the appearance of my table rows and cells. Specifically, I want the cell file name, size, etc., to be colored blue while each row should have a different color on hover. I've attempted to achieve this using CSS and variou ...

phphtmlcssdatabaseecho

What methods are available to decrease the width of the clarity stack component label?

Is there a way to decrease the width of the label in the clarity stack component? I attempted to adjust the width using custom styling, but it did not work as expected. Custom styles applied: .myStyle { max-width: 10% !important; flex-basis: 10% ...

cssangularvmware-clarity

When utilizing *NgIf, the button will be shown without the accompanying text being displayed

When trying to display either a confirm or cancel button based on a boolean set in my component.ts, I implemented the following code in my HTML: <mat-dialog-actions class="dialog-actions"> <button class="cancel-btn" ...

javascripthtmlcssangulartypescript

Verify if data is correct before refreshing user interface

When attempting to submit the HTML5 form, it stops the form submission if any required fields are missing a value or if there is another error such as type or length mismatch. The user interface then shows highlighted invalid fields and focuses on the firs ...

javascripthtmlcssvalidation

Unable to delete a dynamically inserted <select> element by using the removeChild method

As someone who is new to coding web applications, I am currently working on a project that involves adding and deleting dropdowns dynamically. Unfortunately, I have run into an issue where the delete function does not work when the button is pressed. Her ...

javascripthtmlcssremovechild

creating a table with only two td's for formatting

My ultimate goal is to keep my web form code as minimal as possible for easier maintenance. I am currently working on creating a questionnaire and have been using two td elements for this purpose. Here is an example of what the current text structure looks ...

htmlcssasp.net

It is not possible for me to modify the attributes in responsive mode without first generating a new class within the tag

In order to make the attribute work in a responsive manner, I believe I need to create a class within the h2 tag. However, I am unsure where the issue lies. Could it possibly be related to the browser? Check out the image below for reference: this is my p ...

htmlcss

Tips for resolving a sluggish webpage with database content

I am facing an issue with one specific page on my website that contains links to the database. The loading speed of this page is extremely slow and I'm looking for ways to speed it up. I have noticed that even when there are no visitors on the server ...

javascriptphphtmlcssmysql

Can someone explain the significance of this CSS code (specifically regarding font-size division)?

Forgive me, but I'm struggling to come up with a more suitable title for my query. I've come across this piece of code font: 9pt/18px Tahoma; Can anyone shed some light on what it signifies? ...

css

Safari on iOS 11.4 ignoring the 'touch-action: manipulation' property

I ran into an issue while developing a React web app that I want to work seamlessly across different platforms. My goal was to allow users to interact with a div element by double-clicking on desktop and double-tapping on mobile devices. However, when tes ...

javascripthtmlioscssreactjs

What exceeds the size of the HTML tag?

I noticed that the height of my section with id "the-view-port" is set to 100vh in my page like this: <html> <body> <section id="the-view-port"> However, I am experiencing an issue in Chrome (Version 73.0.3683.86) where there seem ...

cssgoogle-chrome

What is the best way to use HTML and CSS to center images and headings on a webpage?

This task is really testing my patience... I'm attempting to create a layout that resembles the following: Logo img|h1|img The horizontal lines flanking the subtitle serve as a visual guide, like this --- Subtitle --- Below is the snippet of H ...

htmlcsspositionalignmentcenter