Utilize the gradient across the entire SVG image

I am looking to create an SVG wheel that rotates with a linear gradient while keeping the gradient in place at the top. Here is my initial attempt:

<svg width="950" class="wheel" height="950" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
            <linearGradient id="wheel" x1="0%" y1="0%" x2="0%" y2="50%" gradientUnits="userSpaceOnUse">
            <stop offset="0%"   stop-color="#fff"/>
            <stop offset="100%" stop-color="#bec7cf"/>
        </linearGradient>
    </defs>
    <circle cx="475" cy="475" r="430" stroke="url(#wheel)" fill="url(#lines)" stroke-width="10"></circle>
    <circle cx="475" cy="475" r="395" stroke="url(#wheel)" fill="transparent" stroke-width="10"></circle>

    <line x1="457" y1="80" x2="457" y2="870.00" stroke="url('#wheel')" stroke-width="10"></line>
    <line x1="492" y1="80" x2="492" y2="870.00" stroke="url('#wheel')" stroke-width="10"></line>

    // more lines...

</svg>

Unfortunately, I noticed that the gradient rotates along with the shapes.

https://i.sstatic.net/dyJw5.png

Is there a method to group these elements together and apply a single gradient across them?

htmlcsssvg

Answer №1

My solution involves creating two groups with different color wheel lines and masking one with a gradient.

The animation uses <animateTransform>. One group spins the wheel clockwise while the other spins the gradient backwards.

<svg width="950" class="wheel" height="950" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="wheel" x1="0%" y1="0%" x2="0%" y2="50%" gradientUnits="userSpaceOnUse">
            <stop offset="0%"   stop-color="#fff"/>
            <stop offset="100%" stop-color="#bec7cf"/>
        </linearGradient>

        <linearGradient id="transwheel" x1="0%" y1="0%" x2="0%" y2="50%" gradientUnits="userSpaceOnUse">
            <stop offset="0%"   stop-color="#fff"/>
            <stop offset="100%" stop-color="#000"/>
        </linearGradient>
    </defs>
    <circle cx="475" cy="475" r="430" stroke="url(#wheel)" fill="transparent" stroke-width="10"></circle>
    <circle cx="475" cy="475" r="395" stroke="url(#wheel)" fill="transparent" stroke-width="10"></circle>

    <mask id="clipping" maskUnits="userSpaceOnUse">
        <circle cx="475" cy="475" r="800" fill="white"></circle>
        <circle cx="475" cy="475" r="70" fill="black"></circle>
    </mask>

    <mask id="gradient" maskUnits="userSpaceOnUse">
        <rect x="0" width="950" y="0" height="950" fill="url(#transwheel)" transform="rotate(0 475 475)">
            <animateTransform attributeName="transform" type="rotate" from="0 475 475" to="-30 475 475" dur="3s" repeatCount="1"></animateTransform>
        </rect>
    </mask>

    <g>
        <animateTransform attributeName="transform" type="rotate" from="0 475 475" to="30 475 475" dur="3s" repeatCount="1"></animateTransform>

        <line x1="457" y1="80" x2="457" y2="870.00" stroke="#bec7cf" stroke-width="10" mask="url(#clipping)"></line>
        <line x1="492" y1="80" x2="492" y2="870.00" stroke="#bec7cf" stroke-width="10" mask="url(#clipping)"></line>

        ...
        (repeating lines of code)
        ...

    </g>

    <g mask="url(#gradient)">
        <animateTransform attributeName="transform" type="rotate" from="0 475 475" to="30 475 475" dur="3s" repeatCount="1"></animateTransform>

        ...
        (repeating lines of code)
        ...

    </g>
</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

Exploring the Robot Framework: Strategies for Identifying and Populating Input Text Fields

Link Here is a snippet of my HTML code: <input type="text" placeholder="Search for extensions" class="user-input" style="width: 370px;"> Despite trying to capture the Xpath of the input text field, I am encou ...

htmlseleniumselenium-chromedriverrobotframeworkrpa

At what point in the lifecycle of my component am I able to begin using this.$refs?

Exploring ways to integrate HTML5 audio events while initializing a Vue.js component that consists of a single file: <template> <audio ref="player" v-bind:src="activeStationUrl" v-if="activeStationUrl" controls autoplay></audio> < ...

javascripthtmlvue.jshtml5-audio

Retrieve the AngularJS scope object by using an alternate scope object as the identifier

As I loop through an array of person objects using ng-repeat, imagine the array looks something like this: [{ "display_name": "John Smith", "status": "part-time", "bio": "I am a person. I do people stuff.", }, { "display_name": "Jane Doe", "stat ...

javascripthtmlangularjs

Align div in the center vertically if its height is smaller than the height of the browser window (

I'm currently utilizing CSS bootstrap 4 to create a layout with multiple columns per row inside a container. Depending on the screen size, these columns may stack on top of each other, causing the container to become taller and sometimes exceed the vi ...

htmlcssbootstrap-4

Create a grid or flex layout with Bootstrap 4 that features a sticky first row and column

Does anyone have any suggestions on how to make the attached grid/table layout responsive using Bootstrap 4's flex/grid system? The layout should include a sticky first row and column for navigation items. I attempted using w- & h- classes, but it do ...

htmlcsstwitter-bootstrapbootstrap-4

Recent updates in angularjs and d3js now offer enhanced compatibility with SVG graphics

Encountering a peculiar behavior while using angularjs and d3js together has brought me here. Check out this Plunker for a demonstration: Plunker Below is the directive responsible for the main function: .directive('element1', function() { ...

javascriptangularjssvgd3.js

How can I manage the tab spacing within a <pre> element with CSS?

Can the tab spacing be customized within a <pre> tag using CSS to specify the number of pixels? For instance, imagine displaying a code snippet within a <pre> on a webpage: function Image() { this.Write = function() { document ...

htmlcss

Trouble arising when attempting to add or remove classes using JavaScript

I've been trying to use JavaScript to toggle the visibility of contact_form_top by adding or removing the hidden class when the button contact_form_btn is clicked, but I'm having trouble getting it to function properly. function hide_unhide_btn( ...

javascripthtml

JavaScript still mentions a class that no longer exists

One of my elements has a class of .collapsed. When this element is clicked, a jQuery function is triggered to remove the .collapsed class and add the .expanded class instead. Even after the .collapsed class is removed, the function I have created continue ...

javascriptjqueryhtml

I have developed a simple food menu using AngularJs, but I am having trouble incorporating comments in a seamless manner

angular.module('myApp',[]) .controller('myController', myController) .factory('menuCtrlFactory', menuCtrlFactory); myController.$inject =['menuCtrlFactory']; function myController(menuCtrlFactory){ var add=th ...

javascripthtmlangularjs

Exploring Angular 4's Capabilities: Navigating a Multi-Dimensional Array

I am currently working with a multi-dimensional array that has two keys, and it is structured as follows: user: any = {}; // The index is incremented within a for loop to add values to the user object (this part is functioning correctly) this.user[index++ ...

javascripthtmlarraysangulartypescript

Guide to Removing Border Radius from Card Header in Bootstrap 4

Is there a way to remove the border radius from the card-header in bootstrap 4? I tried using the code below, but the background color of the card-header is still overlapping, giving the appearance of border-radius: .card-header { height: 50px; ...

htmlcsstwitter-bootstrapborderbootstrap-4

Tips for addressing color contrast accessibility problems with inactive buttons

An issue has arisen with a button that is conditionally disabled and appears greyed out. The background color is #e0e0e0 and the text color is #a6a6a6, resulting in a contrast ratio of 1.84, which falls short of the required 4.5 minimum. Is there a way to ...

cssaccessibilityhigh-contrast

Exclude all elements within a div with the class name using jQuery's serialize() function

I am attempting to filter out hidden form values from the jQuery output of serialize(). The invisible inputs/selects are nested within div.ui-tabs-hide elements. I need to include all input and select elements within divs that do not have the ui-tabs-hide ...

javascriptjqueryhtmlcssserialization

Managing CKEditor HTML content in a C#.net Winform Application

My goal is to integrate CKEditor into a Winform application for loading, editing, and saving HTML content in a Sql Server database. I came across a helpful post on how to incorporate CKEditor into a Winforms app: Can the CKEditor be used in a WinForms ap ...

javascriptc#htmlwinformsckeditor

Tips for resizing and reordering bootstrap columns based on different screen dimensions

I need to rearrange my bootstrap columns. HTML <div class="row equal"> <div class="panel col-lg-7 col-md-7 col-sm-6 col-xs-push-12 " id="PanelFirst"> Insert content here... </div> <div class="panel col-lg-5 col-md- ...

htmlcsstwitter-bootstrap

Retrieving identical information from multiple HTML files

Suppose I have multiple HTML pages from different websites, all with the same content. I am looking to extract this information in a versatile way so that I only need to create a few data extractors (ideally just one). Let's say the fields are (using ...

htmlweb-scrapingweb-crawlerextract

Discover the art of customizing child elements using vanilla extract!

I recently started using vanilla extract to add styles to a NextJS application. Is there a way to style child elements within the parent element without having to create another class? My React component has a structure like this: <ul className={style ...

cssnext.jsvanilla-extract

Is there a way to use JavaScript to rearrange the order of my div elements?

If I have 4 divs with id="div1", "div2", and so on, is there a way to rearrange them to display as 2, 3, 1, 4 using Javascript? I am specifically looking for a solution using Javascript only, as I am a beginner and trying to learn more about it. Please p ...

javascripthtml

The primary objective of utilizing margin

Just embarked on my journey to mastering HTML and CSS. Regarding the 'margin' property: Does its primary function revolve around centering elements horizontally on a webpage? I've crafted a navigation menu for a website, yet I struggle to ...

htmlcssmargin