Is it possible to rotate a group within an SVG without altering the orientation of the gradient fill it contains?

In my search on SO, I came across a lot of information about rotating gradients. However, my issue is the opposite.

I have an icon created from multiple paths that I want to fill with a vertical gradient. I have successfully done this and it works well.

Now, my challenge is to rotate a path or group while keeping the overall gradient of the icon fixed from top to bottom. Currently, when I rotate the semicircle in my test, it transitions from blue at the bottom to red as it reaches the top.

Although this example is simple, my goal is to be able to rotate or move paths and groups within my art piece while maintaining a consistent gradient fill throughout the entire artwork, similar to how I can do with non-animated artwork.

<svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
  <style>
    .spinner {
      transform-origin: center;
      animation: spinner_StKS 0.75s infinite linear;
    }

    .ring,
    .bell {}

    @keyframes spinner_StKS {
      100% {
        transform: rotate(360deg);
      }
    }
  </style>

  <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
    <stop offset="0" stop-color="red" />
    <stop offset="1" stop-color="blue" />
  </linearGradient>

  <g class="icon" fill="url(#gradient)">
    <g id="bell" transform="translate(8.000000, 7.050223)" class="bell">
      <path d="M15.8842999,14.4638359 C14.9360423,12.930403 14.4236902,11.1769083 14.4002435,9.38474047 L14.4002435,6.2627564 C14.4002435,2.80393155 11.5347569,1.77635684e-15 8,1.77635684e-15 C4.46524313,1.77635684e-15 1.59975652,2.80393155 1.59975652,6.2627564 L1.59975652,9.3800434 C1.5771244,11.1738044 1.06474385,12.9290182 0.115700067,14.4638359 C-0.0338774353,14.7055293 -0.0387448115,15.0073403 0.102964457,15.2535317 C0.244673725,15.4997232 0.510966493,15.6521939 0.799726089,15.6521939 L15.2002739,15.6521939 C15.4890335,15.6521939 15.7553263,15.4997232 15.8970355,15.2535317 C16.0387448,15.0073403 16.0338774,14.7055293 15.8842999,14.4638359 Z" id="Path"></path>
      <path d="M8.80563065,17.8637298 C9.48463281,17.6269821 10.018941,17.1041517 10.260886,16.4397355 L5.73911399,16.4397355 C5.95277088,17.026486 6.39588476,17.5061499 6.97097137,17.7732021 C7.54605798,18.0402543 8.20600694,18.0728182 8.80563065,17.8637298 Z" id="Path"></path>
    </g>

    <path d="M16,4.42658222 C21.6727273,4.42658222 26.6181818,8.49003326 27.4909091,14.1498401 C27.6363636,15.1657028 28.5090909,16.0364423 29.6727273,16.0364423 L29.6727273,16.0364423 C30.8363636,16.0364423 31.8545455,15.0205796 31.8545455,13.8595936 C31.8545455,13.7144703 31.8545455,13.5693471 31.8545455,13.4242238 C30.4,4.71682872 22.2545455,-1.23322459 13.5272727,0.218007922 C6.69090909,1.37899393 1.30909091,6.60343099 0.290909091,13.4242238 C6.66133815e-16,14.7303331 0.872727273,15.7461958 2.03636364,16.0364423 C2.18181818,16.0364423 2.32727273,16.0364423 2.47272727,16.0364423 L2.47272727,16.0364423 C3.49090909,16.0364423 4.50909091,15.1657028 4.65454545,14.1498401 C5.38181818,8.49003326 10.3272727,4.42658222 16,4.42658222 Z" id="spinner" class="spinner"></path>
    <path d="M16,0.0728846708 C7.12727273,0.0728846708 0,7.18392399 0,16.0364423 C0,24.8889607 7.12727273,32 16,32 C24.8727273,32 32,24.8889607 32,16.0364423 C32,7.18392399 24.8727273,0.0728846708 16,0.0728846708 Z M16,27.6463025 C9.6,27.6463025 4.36363636,22.4218654 4.36363636,16.0364423 C4.36363636,9.65101927 9.6,4.42658222 16,4.42658222 C22.4,4.42658222 27.6363636,9.65101927 27.6363636,16.0364423 C27.6363636,22.4218654 22.4,27.6463025 16,27.6463025 Z" id="circle" class="ring" opacity="0.25"></path>
    </g>
</svg>

cssanimationsvglinear-gradients

Answer №1

To achieve this effect, you can utilize a mask where all shapes are placed into the mask and then applied to a rectangle with a gradient fill.

In order to streamline the code, I swapped out the two paths creating the spinner with two circles.

.spinner {
  transform-origin: center;
  animation: spinner_StKS 0.75s infinite linear;
}

.ring,
.bell {}

@keyframes spinner_StKS {
  100% {
    transform: rotate(360deg);
  }
}
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0" stop-color="red" />
      <stop offset="1" stop-color="blue" />
    </linearGradient>
    <mask id="m1">
      <g id="bell" fill="white" transform="translate(8.000000, 7.050223)" class="bell">
        <path d="M15.8842999,14.4638359 C14.9360423,12.930403 14.4236902,11.1769083 14.4002435,9.38474047 L14.4002435,6.2627564 C14.4002435,2.80393155 11.5347569,1.77635684e-15 8,1.77635684e-15 C4.46524313,1.77635684e-15 1.59975652,2.80393155 1.59975652,6.2627564 L1.59975652,9.3800434 C1.5771244,11.1738044 1.06474385,12.9290182 0.115700067,14.4638359 C-0.0338774353,14.7055293 -0.0387448115,15.0073403 0.102964457,15.2535317 C0.244673725,15.4997232 0.510966493,15.6521939 0.799726089,15.6521939 L15.2002739,15.6521939 C15.4890335,15.6521939 15.7553263,15.4997232 15.8970355,15.2535317 C16.0387448,15.0073403 16.0338774,14.7055293 15.8842999,14.4638359 Z" id="Path"></path>
        <path d="M8.80563065,17.8637298 C9.48463281,17.6269821 10.018941,17.1041517 10.260886,16.4397355 L5.73911399,16.4397355 C5.95277088,17.026486 6.39588476,17.5061499 6.97097137,17.7732021 C7.54605798,18.0402543 8.20600694,18.0728182 8.80563065,17.8637298 Z" id="Path"></path>
      </g>
      <g stroke="white" stroke-width="4.6" fill="none">
      <circle cx="16" cy="16" r="13.7" class="spinner"
        stroke-dasharray="40 100" pathLength="100" stroke-linecap="round"/></circle>
      <circle cx="16" cy="16" r="13.7" opacity="0.25"/></circle>
      </g>
    </mask>
  </defs>
  <rect width="32" height="32" fill="url(#gradient)" mask="url(#m1)"/></rect>
</svg>

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

Learn how to create text animations using CSS triggered by a scroll event listener

I'm looking to create a text animation similar to the one on this website: They have 3 keyframes for two types of animations: Left to Right and Right to Left. The RTL animation starts at 164vh, while LTR starts at -200vh. These text animations only ...

javascriptcssreactjsnext.js

Center the radio buttons regardless of the length of the text

My dilemma lies with 3 radio buttons and their corresponding labels - while 2 of them are aligned perfectly beneath each other due to their matching character lengths, the middle one extends further making it look misaligned. Check out this fiddle. Below ...

htmlcsstwitter-bootstrap-3

Can you explain the distinction between align-content and align-items?

Can you explain the distinction between align-items and align-content? ...

csslayoutflexboxalignment

The new version 5.1 of Bootstrap modal does not disable scrolling on the <body> element

I'm currently working on a project in Angular 11 using Bootstrap (v5.1.3). My main goal is to create a functionality where clicking on a card, similar to a blog post, will trigger a Bootstrap modal popup displaying the content of that specific post. B ...

htmlcssbootstrap-modalbootstrap-5bootstrap5-modal

Tips for Transitioning a Div Smoothly Upwards with CSS!

This is the code that relates to the title: #main { float: left; width: 20%; height: 10vh; margin-top: 10vh; margin-left: 40%; text-align: center; } #k { font-family: Questrial; font-size: 70px; margin-top: -7px; ...

htmlcsscss-transitions

Unable to conceal the scrollbar while keeping the div scrollable

I've been attempting to implement the techniques outlined in the guides on this site, but I'm encountering difficulty hiding the scroll bar while still maintaining scrolling functionality! My current approach involves setting the parent as relat ...

javascripthtmlcss

I'm looking for a library or plugin that can be used to develop a customizable sidebar window with docking, resizing, and pinning capabilities similar to the ones found

In Visual Studio, the solution explorer and toolbox windows can be hidden at the side unless pinned. They are also resizable. Is there a way to achieve this same behavior using CSS? Has anyone created a jQuery plugin or similar tool for this? ...

jquerycssjquery-ui

Removing a background by linking a CSS file

Issue Resolved: I have found the solution. The problem was that the css document still contained html tags. Thank you to everyone who provided assistance. While designing a website using css, I encountered a situation where the site worked perfectly when ...

htmlcssfilehyperlinkinclude

Safari browser: Navigate with rtl/lrt direction

I created a webpage with right to left (rtl) direction. Below is the html tag I used: <html dir="rtl"> However, I needed two parts of the webpage to be written from left to right (ltr), so I added the dir attribute to this div: <div dir="ltr"&g ...

htmlcssright-to-leftbidi

Several buttons converging towards a single circle

I attempted to create a circular layout using 6 buttons, but the end result did not form a perfect circle as intended. In the image provided, I highlighted the areas of concern in red. Below, you will find my HTML and CSS code for reference. <!DOCTYP ...

htmlcsstizen

Arranging elements in a row and column to ensure proper alignment

https://i.stack.imgur.com/LMsTg.png I'm having trouble aligning the UI elements in my Bootstrap 5 project. I can't seem to pinpoint the issue despite trying various solutions. Here's the code snippet: <div class="container"> ...

csslaravelbootstrap-5

The inline display property does not function properly with the <li> element

Here is the HTML code snippet I am working with: <div class="nav"> <ul class="nav-dots"> <li class='ni n1'><a href="" class='nia'>dot</a></li> <li class='ni n2'><a href="" clas ...

htmlcss

Background Design using React-Native SVG

I'm trying to incorporate an SVG background pattern in React-Native. My approach involved creating a Component using the 'react-native-svg' library, shown below: import React from "react"; import { SvgXml } from "react-native ...

reactjsreact-nativesvg

Flashing text compatibility across all browsers

I'm looking for a way to create text that blinks on all major web browsers. Initially, I attempted using the <blink> HTML tag, but unfortunately, it only works in Mozilla Firefox. Next, I experimented with CSS: <style> .blink {text-deco ...

javascripthtmlcss

Switching Out Bootstrap Dropdown with Dropup (Varying functionality on two almost identical implementations)

In the midst of my project on Github Pages, I encountered an interesting issue involving replacing a bootstrap .dropdown with .dropup when the div's overflow-y: scroll causes the dropdown menu to be cut off or overflow. The functionality can be viewed ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Controling attributes during the design process

Experimenting with a basic User Control in Visual Studio 2008: I've created a Panel called Wrapper with various controls inside. Will Visual Studio be able to handle this during the design phase? public partial class TestControl : System.Web.UI.UserC ...

cssvisual-studio-2008user-controlsdesign-time

Creating an arrow line with CSS styling can be achieved easily

In order to create a horizontal line with a breakdown in the middle that displays an arrow, I want to use only HTML and CSS without relying on bitmap images. If needed, Font Awesome can be used to achieve the desired result. It's important for me to h ...

htmlcsscss-shapes

Instructions on utilizing the CSSStyleSheet.insertRule() method for modifying a :root attribute

Is it possible to dynamically set the background color of the :root CSS property in an HTML file based on a hash present in the URL? The code provided does change the background color, but unfortunately, the hash value doesn't persist as users navigat ...

javascripthtmlcssurl

Transform Table header orientation to vertical

I am struggling with a table structure similar to this <table> <thead> <tr> <th>Numbers</th> <th>Alphabet</th> </tr> </thead> <tbody> & ...

htmlcss

Is there a way to retrieve all CSS styles associated with a specific element?

When I come across a site element that I really like and want to incorporate into my own site, what is a simple way to do so? It can be challenging to navigate through numerous CSS files to find all the necessary styles. ...

htmlcss