Html - css how can I make donut animation

anonymous
September 2, 2023
183 views
1 vote
2 Answers

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="800" width="800">
  <defs>
  <linearGradient id="Gradient1" gradientTransform="rotate(90)">
      <stop offset="0%" stop-color="#000000"/>
      <stop offset="10%" stop-color="#000000"/>
      <stop offset="50%" stop-color="#8b9643"/>
      <stop offset="90%" stop-color="#000000"/>
      <stop offset="100%" stop-color="#000000"/>
    </linearGradient>
     <linearGradient id="Gradient2" gradientTransform="rotate(90)">
      <stop offset="10%" stop-color="#000000"/>
      <stop offset="0%" stop-color="#000000"/>
      <stop offset="50%" stop-color="#dda885"/>
      <stop offset="90%" stop-color="#000000"/>
      <stop offset="100%" stop-color="#000000"/>
    </linearGradient>
    <pattern id="Pattern" x="0" y="0" width="600" height="600" patternUnits="userSpaceOnUse">
    <g transform="rotate(0, 300, 300)">
   <rect shape-rendering="crispEdges" x="0" y="0" width="300" height="600" fill="url(#Gradient1)"/>
   <rect shape-rendering="crispEdges"  x="300" y="0" width="300" height="600" fill="url(#Gradient2)"/>
   </g>
  </pattern>
  </defs>

  <path id='arc5' class="animated" 
      style="stroke: url(#Pattern);" fill='transparent'
        stroke-dasharray="1570 1570"
        stroke-dashoffset="0"
        stroke-width='100' 
        d='M 300 58 A 250 250 0 1 1 299.99 58'/>

</svg>

this is my donut shape figure. How can I animate this donut to appear from top to bottom symmetrically using css? The donut’s left half and right half should appear at the same time.

Answers

this is a simple way to animate it using CSS and HTML. The principle is to use a mask and shrink it to reveal the donut. Hope this helps:

.container {
  display: flex;
  justify-content: flex-end;
  position: relative;
}

.mask {
  position: absolute;
  bottom: 0;
  z-index: 1;
  background: white;
  height: 0;
  width: 800px;
  animation: showDonut 5300ms;
}

@keyframes showDonut {
  from {
    height: 800px;
  }
  to {
    height: 0;
  }
}

<div class="container">
  <div class="mask"></div>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="800" width="800">
    <defs>
      <linearGradient id="Gradient1" gradientTransform="rotate(90)">
        <stop offset="0%" stop-color="#000000"/>
        <stop offset="10%" stop-color="#000000"/>
        <stop offset="50%" stop-color="#8b9643"/>
        <stop offset="90%" stop-color="#000000"/>
        <stop offset="100%" stop-color="#000000"/>
      </linearGradient>
      <linearGradient id="Gradient2" gradientTransform="rotate(90)">
        <stop offset="10%" stop-color="#000000"/>
        <stop offset="0%" stop-color="#000000"/>
        <stop offset="50%" stop-color="#dda885"/>
        <stop offset="90%" stop-color="#000000"/>
        <stop offset="100%" stop-color="#000000"/>
      </linearGradient>
      <pattern id="Pattern" x="0" y="0" width="600" height="600" patternUnits="userSpaceOnUse">
        <g transform="rotate(0, 300, 300)">
          <rect shape-rendering="crispEdges" x="0" y="0" width="300" height="600" fill="url(#Gradient1)"/>
          <rect shape-rendering="crispEdges"  x="300" y="0" width="300" height="600" fill="url(#Gradient2)"/>
        </g>
      </pattern>
    </defs>

    <path id='arc5' class="animated" 
      style="stroke: url(#Pattern);" fill='transparent'
        stroke-dasharray="1570 1570"
        stroke-dashoffset="0"
        stroke-width='100' 
        d='M 300 58 A 250 250 0 1 1 299.99 58'/>
  </svg>
</div>

You can animate a stroke-dasharray in a mask. I use a circle because and set the pathLength so that it’s easier to calculate the array.

#c1 {
  animation: unfold linear forwards 5300ms;
}

@keyframes unfold {
  from {
    stroke-dasharray: 0 100;
    stroke-dashoffset: -50;
  }
  to {
    stroke-dasharray: 100 100;
    stroke-dashoffset: 0;
  }
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" height="95vh">
  <defs>
    <linearGradient id="Gradient1" gradientTransform="rotate(90)">
      <stop offset="0%" stop-color="#000000"/>
      <stop offset="10%" stop-color="#000000"/>
      <stop offset="50%" stop-color="#8b9643"/>
      <stop offset="90%" stop-color="#000000"/>
      <stop offset="100%" stop-color="#000000"/>
    </linearGradient>
    <linearGradient id="Gradient2" gradientTransform="rotate(90)">
      <stop offset="10%" stop-color="#000000"/>
      <stop offset="0%" stop-color="#000000"/>
      <stop offset="50%" stop-color="#dda885"/>
      <stop offset="90%" stop-color="#000000"/>
      <stop offset="100%" stop-color="#000000"/>
    </linearGradient>
    <pattern id="Pattern" x="0" y="0" width="600" height="600" patternUnits="userSpaceOnUse">
      <g transform="rotate(0, 300, 300)">
        <rect shape-rendering="crispEdges" x="0" y="0" width="300" height="600" fill="url(#Gradient1)"/>
        <rect shape-rendering="crispEdges"  x="300" y="0" width="300" height="600" fill="url(#Gradient2)"/>
      </g>
    </pattern>
    <mask id="m1">
      <circle id="c1" transform="translate(300 300) rotate(90)" r="250"
        stroke="white" fill="none" stroke-width="100" pathLength="100"
        stroke-dasharray="10 100" stroke-dashoffset="-45"/>
    </mask>
  </defs>
  <rect width="800" height="800" fill="url(#Pattern)" mask="url(#m1)" />
</svg>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – css how can I make donut animation

Answers