Anyone know a way to create this. (see pic)
Im hoping to create an animated underline that looks like a heartbeat.
I dont mean the image slide in /out… I mean a loop like a cardio thing! I do have HYPE but have not masterered it.
CODER SOURCE
<svg xmlns="http://www.w3.org/2000/svg" id="prqy1fkri4k54clb034yddxx" viewBox="0 0 512 512"><style>
@keyframes vmc5wofk3samn8i5x3glrtn2_t { 0% { transform: translate(13.6px,5.5px); } 98.35% { transform: translate(377.3px,3px); } 100% { transform: translate(377.4px,2.9px); } }
</style><g transform="translate(256,256)"><g><path fill="#fff" d="M-232.7 21c0 0 141.8-2 141.8-2c0 0 10.9-27 10.9-27c0 0 17.3 57 17.3 57c0 0 28.2-157 28.2-157c0 0 30 222 30 222c0 0 20-95 20-95c0 0 26.3 0 26.3 0c0 0 12.7-41 12.7-41c0 0 9.1 40 9.1 40c0 0 166.4 1 166.4 1" stroke="#bb0404" stroke-width="3"/></g><g><path fill="#fff" stroke="#bb0404" stroke-width="3"/></g></g><g transform="translate(244.5,261) scale(1.3152,1.40261)"><g transform="translate(13.6,5.5)" style="animation: 2s linear infinite both vmc5wofk3samn8i5x3glrtn2_t;"><rect x="-184.5" y="-114.5" fill="#fff" width="369.1" height="229" stroke="#fff" stroke-width="0"/></g></g></svg>
Then with Grid Plus Pro you set the positions of the text (Header Pro BWD) and of the animation (Coder Source).
it’s an idea… I’d start from here.
Like this? Scroll to the bottom of the page:
If you use the DevTools inspector you will find that the site (above) uses:
PulsarThing pulsarthing by RapidWeaver Central. Visit http://www.weaverthings.com for more information.
Not sure is that’s active now but there was a stack to do this.
Alternatively, Google something ike “CSS heart beat trace” to find exactly what you want and then one solution woudl be to add the html code into a stack like Coder set to html and add the CSS into another Coder set to CSS.
All my free stacks are still on the RapidWeaver Central Freebies page here. They haven’t been updated in a while but thankfully some of them are still as pointless as ever. However I can’t find the PulsarThing stack, but I do still have the SVG. If anyone wants it, message me.
2 Likes
And they are very good in that.
2 Likes
Found the PulsarThing Stack in my archives. Should I send it to you, @Marten or even post it here…?
1 Like
Nice one, Matthias! Feel free to do both.
My most downloaded stack, Jannis? Pointless Thing. It really is purposeless.
1 Like
I think I have it in use on every page. So good. Cannot live without it. Clearly makes a difference.