Glowing effects on svg shapes

I'm looking to add a pulsing light animation around an SVG half circle shape that I have created.

After experimenting with CSS and Webkit, the closest I've come is achieving a pulsing light around the parent element, rather than the actual shape itself. Any insights or ideas on how to accomplish this would be greatly appreciated.

The SVG:

<svg class="pulse-button" width="234" height="256" xmlns="http://www.w3.org/2000/svg">
                  <g class="half-circle">>
                    <rect class="rect" x="-1" y="-1" width="236" height="258" id="canvas_background" fill="none"/>
                    <path transform="rotate(-90.53539276123047 116.5,117.59869384765625) " id="svg_6" d="m66,24.098694c55.8011,0 101,41.84254 101,93.5c0,51.65746 -45.1989,93.5 -101,93.5l0,-187z" stroke-linecap="null" stroke-linejoin="null" stroke-width="4" stroke="#000000" fill="#000000"/>
                  </g>
                </svg>

javascripthtmlcsssvgvue.js

Answer №1

If you're looking for a CSS-only solution, you can give this a try:

.pulse-effect {
  width:150px;
  height:75px;
  position:relative;
  margin:15px;
}

.pulse-effect::before,
.pulse-effect::after {
   content:"";
   position:absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
   border-radius:50%;
   background:#000;
}
.pulse-effect::before {
   background:blue;
   transform:scale(0.6);
   animation: pulse-animation 1s infinite alternate; 
}
@keyframes pulse-animation {
  to {
    transform:scale(1.2);
  }
}
<div class="pulse-effect">

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

The use of "Undefined in res.redirect" is a common issue that may arise when working with a combination of libraries such as

Encountering an issue while trying to redirect the user to a signature route with the file name as a URL argument, and receiving undefined... Example of a file as a URL argument after upload: http://localhost:3000/undefined?arquivo-assinado=82a35943-5796 ...

javascriptnode.jsexpressmulter

Vue3: Enhanced hook not triggered when transition is applied to component's root element

It seems like there might be something missing in the documentation, as I've observed that the updated hook is not triggered when a component's root element is wrapped in a transition. This behavior was different in Vue 2. Here are two simple exa ...

vue.jsvuejs3

Analyze XML elements and retrieve their associated content

Analyzed below are the contents extracted from the processed XML file: <dblp> <incollection> ...

pythonhtmlxmlpython-3.x

Transmitting JSON AJAX response to populate location markers on Google Maps

When a button is clicked, an AJAX response is triggered to display JSON data based on a search query. My goal is to take the all_locations variable from the AJAX response and use it to show markers on a Google map. I'm uncertain about how to achieve t ...

javascriptjqueryjsonajaxgoogle-maps

Constantly encountering the issue of receiving an error message stating "Trailing Spaces not Permitted" while working with VueJS

I am encountering an issue in my Vue and Vuetify project where I keep getting the error "Trailing spaces not allowed src\App.vue:39:11" every time I compile in the CLI. Even though I added the comment "/* eslint-disable eol-last */" in my ESlint conf ...

vue.jsvuetify.jseslint

`Jump-start Your Development with jQuery Lightbox Centering`

Recently, I implemented a lightbox effect for images on my website. However, I encountered an issue where the lightbox was not centering properly in the window upon initial click. Instead, the lightbox would appear at the bottom of the page on the first cl ...

javascriptjqueryhtmlcssjquery-ui

Problem with uploading special characters (čžćšđ) in Uploadify

I've encountered an issue with uploading images using . When I upload images with characters such as (čžćšđ) like "čžćšđ.jpg", the characters get corrupted and the uploaded image ends up looking like čćžšđ.jpg. How can I pr ...

javascriptjquery

Ways to extract pertinent information from a PHP API

I've been attempting to add parameters to my query, but I keep getting inconsistent results. Despite trying different methods, I haven't been successful. Take a look at the code below. First, here is my code that functions properly without using ...

javascriptreactjsurlencode

Implementing CKEditor instances within AngularJS Controller scopes

Greetings everyone, Recently, I have been exploring Angular JS. Everything is going smoothly - my controllers, services, and so on. However, when attempting to make a Div editable that is within the ng-controller, the ckeditor toolbar fails to appear. On ...

javascripthtmlangularjsckeditor

Is there a way to keep the modal window open in React without it automatically closing?

I have been working on a modal window implementation in React. I defined a state variable called modalbool to control the visibility of the modal window. The modal window is displayed only when modalbool is set to true. Additionally, I created a parent com ...

javascriptnode.jsreactjsreact-native

An Ajax call nested within another Ajax call

I've implemented an AJAX request to load my "home" page and "about" page into a designated "container" when a menu link button is clicked on my index.php. Now, I have three links on my "home" page and I want each of these links to open within the same ...

javascriptphpjqueryajaxinclude

Populate DataTable with HTML content by fetching it through Ajax requests

My goal is to dynamically load the HTML returned from a controller into a div when a user clicks on a row in a table. Check out my code snippet below: // Add event listener for opening and closing details jQuery('#exRowTable tbody').on ...

javascriptjqueryasp.netajaxrazor

Error: Attempting to access a property of an undefined value, please verify the key name is

Attempting to incorporate dynamic elements into the assignment, I have written the following code: var contentList = Object.keys(content)[0]; $scope.model.currentLoadedContent[contentList] = content[Object.keys(content)[0]] When trying to execute the seco ...

javascript

Using http-proxy-middleware in a React application for browser proxy

I'm having trouble with setting up a proxy in my React app. Scenario: I have two React apps, one running on localhost:3000 and the other on localhost:3001. What I want to achieve is that when I click on: <a href="/app2"> <button> ...

javascriptreactjsproxyreverse-proxyhttp-proxy-middleware

Switching the positions of the date and month in VueJS Datepicker

Recently, I have been utilizing the datepicker component from vuejs-datepicker. However, I encountered an issue where upon form submission, the date and month switch places. For instance, 10/08/2018 (dd/MM/yyyy) eventually displays as 08/10/2018, leading ...

javascriptvue.jsdatepicker

Sending information through a form via a POST request after clicking on a hyperlink

I am attempting to submit a form using POST by clicking on a link and passing some hidden values. This is the code I'm currently using: $( document ).ready(function() { $('a#campoA').click(function() { $.post('testForm2.php', { ...

javascriptjqueryforms

Perform DOM manipulation prior to triggering the AJAX event to prevent CSRF Error

Currently, I am faced with a challenge while working on Django. My goal is to implement a chained AJAX call - meaning that once one call returns, it triggers additional AJAX calls. Despite thorough research and referencing the suggested methods in the Djan ...

javascriptjqueryajaxdjangocsrf

How to create vertical spacing between <a> elements within the same div using HTML and CSS

Currently, the layout in picture 1 shows how my content is displayed. I am looking to create spacing (bottom margin?) between the images like the example in picture 2. The two side-by-side blocks are separate DIVs, and the images within each line belong to ...

htmlcssimagemargin

ModSecurity Action Causing AJAX Problem

An error is being triggered by the URL below with a message of "Modsecurity forbidden status code: 403". This URL is being returned from an AJAX call. like ? and active = ?&params='%ABCDE%'|1&element_id=hello If I remove %% from ABCDE ...

javascriptajax

Customizing font size in React with Material UI: A comprehensive guide on adjusting the font size of the Select component

I'm currently working on a web application that utilizes React along with Material UI. My goal is to adjust the font size of the Select component. I've attempted to achieve this by utilizing the MenuProps property, as shown in the following code ...

javascriptreactjsmaterial-ui