SVG Animation - Have a Heart

Greg_Deckler — Tue, 18 Sep 2018 15:39:23 GMT

Again, to see the animation, you may have to download the PBIX. Three measures, Heart, HeartBeat and BeatingHeart.

Heart

Heart = 
VAR __color = "Red"
VAR __lineColor = "Black"
VAR __lineThickness = 1
VAR __radius = 9
VAR __opacity = 1
VAR __rand = RAND()
VAR __header = "data&colon;image/svg+xml;utf8," &
              "<svg 
                xmlns:dc='http://purl.org/dc/elements/1.1/'
                xmlns:cc='http://creativecommons.org/ns#'
                xmlns:svg='http://www.w3.org/2000/svg'
                xmlns='http://www.w3.org/2000/svg'
                viewBox='0 0 150 150' version='1.1'>"
VAR __footer = "</svg>"
VAR __shapeTextCircle = "
<g>
    <circle cx='30' cy='50' r='30' stroke='Red' fill='Red'/>
    <circle cx='70' cy='50' r='30' stroke='Red' fill='Red'/>
    <path stroke-width='2' stroke='Red' fill='Red' d='M7 70, L50 112, L93 70'/>
    <!-- <path stroke-width='2' stroke='Red' fill='Red' d='M60,30 a30,30 0 0,1 0,60 L0,90 0,30 a30,30 0 0,1 60,0' /> -->     </g>
"
RETURN IF([Flag],"",__header & __shapeTextCircle & __footer)

HeartBeat

HeartBeat = 
VAR __color = "Red"
VAR __lineColor = "Black"
VAR __lineThickness = 1
VAR __radius = 9
VAR __opacity = 1
VAR __rand = RAND()
VAR __header = "data&colon;image/svg+xml;utf8," &
              "<svg 
                xmlns:dc='http://purl.org/dc/elements/1.1/'
                xmlns:cc='http://creativecommons.org/ns#'
                xmlns:svg='http://www.w3.org/2000/svg'
                xmlns='http://www.w3.org/2000/svg'
                viewBox='0 0 20 10' version='1.1'>"
VAR __footer = "</svg>"
VAR __shapeText = "
    <path stroke-width='.5' stroke='Red' fill='none' d='M-13 7, L-10 7, L-9 1, L-8 9, L-7 7, L-4 7, L-3 1, L-2 9, L-1 7, L2 7, L3 1, L4 9, L5 7, L8 7, L9 1, L10 9, L11 7, L14 7, L15 1, L16 9, L17 7, L20 7' stroke-dasharray='120' stroke-dashoffset='0'>
    <animateTransform 
           attributeName='transform' 
           attributeType='XML'
           type='translate'
           from='0 0'
           to='12 0' 
           dur='5s'
           begin='0s'
           repeatCount='indefinite'
           />
    </path>
"
VAR __shapeTextFlat = "
    <path stroke-width='.5' stroke='Red' fill='none' d='M0 7, L20 7'/>
"
RETURN IF([Flag],__header & __shapeTextFlat & __footer,__header & __shapeText & __footer)

BeatingHeart

BeatingHeart = 
VAR __color = "Red"
VAR __lineColor = "Black"
VAR __lineThickness = 1
VAR __radius = 9
VAR __opacity = 1
VAR __rand = RAND()
VAR __header = "data&colon;image/svg+xml;utf8," &
              "<svg 
                xmlns:dc='http://purl.org/dc/elements/1.1/'
                xmlns:cc='http://creativecommons.org/ns#'
                xmlns:svg='http://www.w3.org/2000/svg'
                xmlns='http://www.w3.org/2000/svg'
                viewBox='0 0 150 150' version='1.1'>"
VAR __footer = "</svg>"
VAR __shapeTextCircle = "
<g>
    <circle cx='30' cy='50' r='30' stroke='Red' fill='Red'/>
    <circle cx='70' cy='50' r='30' stroke='Red' fill='Red'/>
    <path stroke-width='2' stroke='Red' fill='Red' d='M7 70, L50 112, L93 70'/>
    <animateTransform 
           attributeName='transform' 
           attributeType='XML'
           type='scale'
           from='1'
           to='1.1' 
           dur='1s'
           begin='0s'
           repeatCount='indefinite'
           />
    </g>
"
RETURN IF([Flag],"",__header & __shapeTextCircle & __footer)

eyJrIjoiNjAyNTM2NzMtYjZiMC00MTAyLThjOTUtMDM5YzY5Zjg0ODZkIiwidCI6IjRhMDQyNzQzLTM3M2EtNDNkMi04MjdiLTAwM2Y0YzdiYTFlNSIsImMiOjN9

topic SVG Animation - Have a Heart in Quick Measures Gallery

SVG Animation - Have a Heart