Kevin Powell - Community•2y ago

can I make a reusable html code like a function?

(not really sure how to call it) let's say that I have a large SVG with a css animation and that I want to use it multiple times inside of my html file (it can't be a php file . . . I know, that would solve it) can I make something like a function or definition of my pseudo code where I will define this chunk of code once, and everytime I need to place it down I will just use that variable/definition instead of copy-pasting it like 20 times? (I know that I can create pseudo-class in which I can paste this svg via link in the content but I wouldn't be able to controll and animate separate parts of it)

15 Replies

b1mind•2y ago

use <use>

b1mind•2y ago

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use

- SVG: Scalable Vector Graphics | MDN

The element takes nodes from within the SVG document, and duplicates them somewhere else. The effect is the same as if the nodes were deeply cloned into a non-exposed DOM, then pasted where the use element is, much like cloned template elements.

m1.r0OP•2y ago

ow can I just create svg element where I will just make one <use> element with that first svg's id? *id of that first complex svg that I will define somewhere at the begining

b1mind•2y ago

yup pretty much This is commonly used for SVG sprites too.

m1.r0OP•2y ago

thanks a lot . . . I couldn't find it when I was looking for it

b1mind•2y ago

I think the animation should just apply to the use too Least it is when I use JS to animate

m1.r0OP•2y ago

thanks may I ask you for your help in css animations and svg again? I'm trying to do this: (attachment) ease is applied in between every key frame rather than the whole animation, I would also like the shadow and gradient not to spin . . . do you know how to solve that?

/*POPUP VIDEO BUTTON STYLE*/
#circle-gradient {
    --start-color: #aed695;
    --end-color: #2b9d59;
}

#triangle-gradient {
    --start-color: #900;
    --end-color: #f00;

}

#button-svg-group{  
    & #circle {
        fill: url(#circle-gradient) #aed695;
        --stroke-color: #000;

        stroke: var(--stroke-color);
        stroke-width: 5px;
    }

    & #triangle{
        fill: url(#triangle-gradient) #f00;
        --stroke-color: #fff;

        stroke: var(--stroke-color);
        stroke-width: 8px;

        -webkit-filter: drop-shadow( 9px 14px 7px rgba(0, 0, 0, .7));
        filter: drop-shadow( 9px 14px 7px rgba(0, 0, 0, .7));
    }
}

svg > text.video-button-letter {
    font-family: Helvetica, sans-serif;
    font-size: 150px;
    fill: #fff;
}

/*POPUP VIDEO BUTTON ANIMATION*/
@keyframes rotate-button {
    from {
        transform: rotateZ(0turn);
        transform-origin: 250px 250px;
    }

    15% {
        transform:  rotateZ(0.15turn) scale(0.8);
    }

    50% {
        transform:  rotateZ(0.5turn) scale(1.2);
    }

    85% {
        transform:  rotateZ(0.85turn) scale(0.8);
    }

    to {
        transform: rotateZ(1turn) scale(1.0);
        transform-origin: 250px 250px;
    }
}

svg:hover #triangle {
    animation: rotate-button 1.0s ease-in-out normal;
    transform-origin: 250px 250px;
}

/*POPUP VIDEO BUTTON STYLE*/
#circle-gradient {
    --start-color: #aed695;
    --end-color: #2b9d59;
}

#triangle-gradient {
    --start-color: #900;
    --end-color: #f00;

}

#button-svg-group{  
    & #circle {
        fill: url(#circle-gradient) #aed695;
        --stroke-color: #000;

        stroke: var(--stroke-color);
        stroke-width: 5px;
    }

    & #triangle{
        fill: url(#triangle-gradient) #f00;
        --stroke-color: #fff;

        stroke: var(--stroke-color);
        stroke-width: 8px;

        -webkit-filter: drop-shadow( 9px 14px 7px rgba(0, 0, 0, .7));
        filter: drop-shadow( 9px 14px 7px rgba(0, 0, 0, .7));
    }
}

svg > text.video-button-letter {
    font-family: Helvetica, sans-serif;
    font-size: 150px;
    fill: #fff;
}

/*POPUP VIDEO BUTTON ANIMATION*/
@keyframes rotate-button {
    from {
        transform: rotateZ(0turn);
        transform-origin: 250px 250px;
    }

    15% {
        transform:  rotateZ(0.15turn) scale(0.8);
    }

    50% {
        transform:  rotateZ(0.5turn) scale(1.2);
    }

    85% {
        transform:  rotateZ(0.85turn) scale(0.8);
    }

    to {
        transform: rotateZ(1turn) scale(1.0);
        transform-origin: 250px 250px;
    }
}

svg:hover #triangle {
    animation: rotate-button 1.0s ease-in-out normal;
    transform-origin: 250px 250px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <link rel="stylesheet" href="style - Copy.css">

    <svg id="svg-video-button-icon" width="400" height="400" viewBox="50 50 406 406" fill="none" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <linearGradient id="circle-gradient" gradientTransform="rotate(60)">
                <stop offset="25%" stop-color="var(--start-color)"  />
                <stop offset="105%" stop-color="var(--end-color)" />
            </linearGradient>
            <linearGradient id="triangle-gradient">
                <stop offset="0%" stop-color="var(--start-color)"  />
                <stop offset="80%" stop-color="var(--end-color)" />
            </linearGradient>
        </defs>
        <g id="button-svg-group">
            <circle id="circle" cx="253" cy="253" r="200"/>
            <path id="triangle" d="M160.215 144.461C160.215 121.367 185.215 106.934 205.215 118.481L392.715 226.734C412.715 238.281 412.715 267.148 392.715 278.695L205.215 386.949C185.215 398.496 160.215 384.062 160.215 360.968L160.215 144.461Z"/>
        </g>
    </svg>

    <svg viewBox="0 0 400 400" width="30%" height="30%" xmlns="http://www.w3.org/2000/svg" class="video-button-icon">
        <use href="#svg-video-button-icon"></use>
        <text text-anchor="middle" x=200 y=250 class="video-button-letter">A</text>
    </svg>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <link rel="stylesheet" href="style - Copy.css">

    <svg id="svg-video-button-icon" width="400" height="400" viewBox="50 50 406 406" fill="none" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <linearGradient id="circle-gradient" gradientTransform="rotate(60)">
                <stop offset="25%" stop-color="var(--start-color)"  />
                <stop offset="105%" stop-color="var(--end-color)" />
            </linearGradient>
            <linearGradient id="triangle-gradient">
                <stop offset="0%" stop-color="var(--start-color)"  />
                <stop offset="80%" stop-color="var(--end-color)" />
            </linearGradient>
        </defs>
        <g id="button-svg-group">
            <circle id="circle" cx="253" cy="253" r="200"/>
            <path id="triangle" d="M160.215 144.461C160.215 121.367 185.215 106.934 205.215 118.481L392.715 226.734C412.715 238.281 412.715 267.148 392.715 278.695L205.215 386.949C185.215 398.496 160.215 384.062 160.215 360.968L160.215 144.461Z"/>
        </g>
    </svg>

    <svg viewBox="0 0 400 400" width="30%" height="30%" xmlns="http://www.w3.org/2000/svg" class="video-button-icon">
        <use href="#svg-video-button-icon"></use>
        <text text-anchor="middle" x=200 y=250 class="video-button-letter">A</text>
    </svg>


</body>
</html>

and the letter, which willl be always different inside of that triangle should rotate as well nevermind, screw that . . . right now I have this:

#circle-gradient {
    --start-color: #aed695;
    --end-color: #2b9d59;
}

#triangle-gradient {
    --start-color: #900;
    --end-color: #f00;
}

#button-svg-group{  
    & #circle {
        fill: url(#circle-gradient) #aed695;
        --stroke-color: #000;

        stroke: var(--stroke-color);
        stroke-width: 5px;
    }

    & #triangle {
        fill: url(#triangle-gradient) #f00;
        --stroke-color: #fff;

        stroke: var(--stroke-color);
        stroke-width: 8px;
    }

    & #triangle-shadow {
        fill: #000;
        opacity: 0.5;
    }
}

svg > text.video-button-letter {
    font-family: Helvetica, sans-serif;
    font-size: 150px;
    fill: #fff;
}

/*POPUP VIDEO BUTTON HOVER ANIMATION*/
#triangle,
#triangle-shadow {
    transform-origin: 62% 62%;
    transition: all 1s ease;
}
#triangle-shadow {
    transform: translateX(9px) translateY(14px);
}

svg:hover #triangle{
    transform: rotateZ(360deg);
}

svg:hover #triangle-shadow {
    transform: translateX(9px) translateY(14px) rotateZ(360deg);
}

svg text{
    transition: all 1s ease;
    transform-origin: 50% 50%;
    transform: rotateZ(0deg);
}

svg:hover text{
    transform: rotateZ(360deg);
}

#circle-gradient {
    --start-color: #aed695;
    --end-color: #2b9d59;
}

#triangle-gradient {
    --start-color: #900;
    --end-color: #f00;
}

#button-svg-group{  
    & #circle {
        fill: url(#circle-gradient) #aed695;
        --stroke-color: #000;

        stroke: var(--stroke-color);
        stroke-width: 5px;
    }

    & #triangle {
        fill: url(#triangle-gradient) #f00;
        --stroke-color: #fff;

        stroke: var(--stroke-color);
        stroke-width: 8px;
    }

    & #triangle-shadow {
        fill: #000;
        opacity: 0.5;
    }
}

svg > text.video-button-letter {
    font-family: Helvetica, sans-serif;
    font-size: 150px;
    fill: #fff;
}

/*POPUP VIDEO BUTTON HOVER ANIMATION*/
#triangle,
#triangle-shadow {
    transform-origin: 62% 62%;
    transition: all 1s ease;
}
#triangle-shadow {
    transform: translateX(9px) translateY(14px);
}

svg:hover #triangle{
    transform: rotateZ(360deg);
}

svg:hover #triangle-shadow {
    transform: translateX(9px) translateY(14px) rotateZ(360deg);
}

svg text{
    transition: all 1s ease;
    transform-origin: 50% 50%;
    transform: rotateZ(0deg);
}

svg:hover text{
    transform: rotateZ(360deg);
}

<svg id="svg-video-button-icon" width="400" height="400" viewBox="50 50 406 406" fill="none" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <linearGradient id="circle-gradient" gradientTransform="rotate(60)">
                <stop offset="25%" stop-color="var(--start-color)"  />
                <stop offset="105%" stop-color="var(--end-color)" />
            </linearGradient>
            <linearGradient id="triangle-gradient">
                <stop offset="20%" stop-color="var(--start-color)" />
                <stop offset="100%" stop-color="var(--end-color)" />
            </linearGradient>
        </defs>
        <g id="button-svg-group">
            <circle id="circle" cx="253" cy="253" r="200"/>
            <path id="triangle-shadow" d="M160.215 144.461C160.215 121.367 185.215 106.934 205.215 118.481L392.715 226.734C412.715 238.281 412.715 267.148 392.715 278.695L205.215 386.949C185.215 398.496 160.215 384.062 160.215 360.968L160.215 144.461Z"/>
            <path id="triangle" d="M160.215 144.461C160.215 121.367 185.215 106.934 205.215 118.481L392.715 226.734C412.715 238.281 412.715 267.148 392.715 278.695L205.215 386.949C185.215 398.496 160.215 384.062 160.215 360.968L160.215 144.461Z"/>
        </g>
    </svg>

    <svg viewBox="0 0 400 400" width="30%" height="30%" xmlns="http://www.w3.org/2000/svg" class="video-button-icon">
        <use href="#svg-video-button-icon"></use>
        <text text-anchor="middle" x=200 y=250 class="video-button-letter">A</text>
    </svg>

<svg id="svg-video-button-icon" width="400" height="400" viewBox="50 50 406 406" fill="none" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <linearGradient id="circle-gradient" gradientTransform="rotate(60)">
                <stop offset="25%" stop-color="var(--start-color)"  />
                <stop offset="105%" stop-color="var(--end-color)" />
            </linearGradient>
            <linearGradient id="triangle-gradient">
                <stop offset="20%" stop-color="var(--start-color)" />
                <stop offset="100%" stop-color="var(--end-color)" />
            </linearGradient>
        </defs>
        <g id="button-svg-group">
            <circle id="circle" cx="253" cy="253" r="200"/>
            <path id="triangle-shadow" d="M160.215 144.461C160.215 121.367 185.215 106.934 205.215 118.481L392.715 226.734C412.715 238.281 412.715 267.148 392.715 278.695L205.215 386.949C185.215 398.496 160.215 384.062 160.215 360.968L160.215 144.461Z"/>
            <path id="triangle" d="M160.215 144.461C160.215 121.367 185.215 106.934 205.215 118.481L392.715 226.734C412.715 238.281 412.715 267.148 392.715 278.695L205.215 386.949C185.215 398.496 160.215 384.062 160.215 360.968L160.215 144.461Z"/>
        </g>
    </svg>

    <svg viewBox="0 0 400 400" width="30%" height="30%" xmlns="http://www.w3.org/2000/svg" class="video-button-icon">
        <use href="#svg-video-button-icon"></use>
        <text text-anchor="middle" x=200 y=250 class="video-button-letter">A</text>
    </svg>

@b1mind , could you tell me how to copy those svg elements with that <use> element so I can spin only that one which I'm hovering above only? thansks

b1mind•2y ago

Make a codepen and I'll take a look

m1.r0OP•2y ago

https://codepen.io/Myroslav-Kliestik/pen/xxQzWbJ?editors=1100

m1.r0_bot

CodePen

xxQzWbJ

...

b1mind•2y ago

Not at my PC atm but I would visually hide the main SVG with no animation then add the hover to the svgs with Use. Like I mentioned it would probably repeat the animation on all Which is actually handy in it's own right

m1.r0OP•2y ago

but how . . . in css I can go in class svg:hover use but I can't specify .triangle and .circle further on

b1mind•2y ago

ah right... cause you are targeting the elements in it.. 🤔 I would make just the triangle the svg xD Animation is the one time I do use inline svg over sprites/images for this reason. It can be tricky gotta run but I might think on this some. See if I come up with a slick solution. This is where UI components come in really hand too xD Cause today I would just whip this up as a Svelte Component and reuse that xD

m1.r0OP•2y ago

well . . . i just get rid of that use component . . . found out that I don't need to define that <defs> element in every svg and it is much more simpler now . . . (it was more complex before but I gave up)

m1.r0OP•2y ago

copying element of this size is ok

m1.r0OP•2y ago

(but what a shame I cannot use php in this project, I would just create one echo function) another great shit i just found out . . . iframes

Gaming

Programming

can I make a reusable html code like a function?

Did you find this page helpful?