Duplicate animated SVG with Symbol Element not working

Y

yeyven

Joined
Sep 7, 2022
Messages
2
Reaction score
0
For some reason I cannot seem to duplicate the following animated (CSS, not JS) SVG with the Symbol Element ?


CSS: 
@keyframes offset {
    100% {
        stroke-dashoffset: 0;
    }
}

.svg {
    display: block;
    margin: 2em auto 0;
    width: 40%;
}

.cube-dotted {
    stroke: red;
    stroke-width: 2;
    stroke-dasharray: 2.5;
    stroke-dashoffset: 80;

    /* end animation with final keyframe with 'forwards' to avoid line resetting to start value i.e. nothing */
    animation: offset 5s linear forwards;
}

HTML: 
<!DOCTYPE html>
<html>
<head>
    <title>Animated Line Drawing</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

        <svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="210.7 336.7 125 135" width="340px">
  <!-- Our symbol in its own coordinate system -->
  <symbol id="cube" width="10" height="10" viewBox="0 0 125 135">

        <path fill="transparent" d="M319.4,362.3c-4.3-2.5-11.3,1.4-15.5,8.8l-7.6,13.2c-2.8,5.5-2.4,12.1,1.2,17.2l0.3,0.3
        c3.5,5.1,8.3,9.7,9.8,11.4c0.9,0.9,1.6,2.2,2,3.5c1.3,4.6-1.4,9.4-6,10.6c-4.6,1.3-9.4-1.4-10.6-6c-0.3-1.2-0.4-2.4-0.3-3.4
        c0.3-2-0.4-5-3.1-8s-8.3,2.8-10.1,8.6l-0.1,0.3c-1.8,5.9-2.9,11-2.6,11.5c0.3,0.3,0.4,0.7,0.5,0.9c2.6,5,0.8,10.9-3.9,13.4
        c-4.7,2.5-10.6,0.8-13.2-4.1c-2.5-4.7-0.8-10.6,4.1-13.2c0.3-0.1,0.4-0.3,0.7-0.3c0.4-0.1,1.4-2.6,2.2-5.6c0.9-2.9,1.6-5.4,1.6-5.4
        c0.1-0.3,0.1-0.7,0.3-0.9l4.8-17.2l-5.1,10.6c-0.7-2-1.6-2.1-3.8-0.5c-1.3,0.9-3.5,2.9-4.6,3.5c-2,1.4-3.7,4.2-4.6,6
        c-0.5,1-1.3,2-2.2,2.8c-3.7,3-9,2.5-12.1-1.3c-3-3.7-2.5-9,1.3-12.1c1-0.9,2.4-1.4,3.5-1.7c2.2-0.5,9.6-5,14-8.1
        c0.8-0.5,1.4-1,2-1.6l11.8-9l-10.3,5.6c0,0-1-0.1-2.4,0c-3.8,0.4-7.7,0.9-8.4,1.8c-0.4,0.5-0.9,1-1.6,1.4c-3.4,2.5-8.3,1.7-10.7-1.7
        c-2.5-3.4-1.7-8.3,1.7-10.7c1.4-1,3-1.4,4.7-1.4c2.8,0.1,10.1,1.6,16.1,0.5l1.6-0.3c6-1,13.4-6.4,16.2-11.8c0,0,2.9-5,6.3-11.1
        c3.5-6.2,3.3-12.8-0.5-15.1l-6.9-3.9c-3.5-2-9.2-2-12.7,0l-47.7,26.9c-3.4,2-6.3,6.9-6.3,10.9v52.5c0,4.1,2.9,8.9,6.3,10.9
        l47.7,26.9c3.5,2,9.2,2,12.7,0l47.6-26.9c3.5-2,6.3-6.8,6.3-10.9v-52.5c0-4.1-2.9-8.9-6.3-10.9C327.2,366.8,323.7,364.8,319.4,362.3
        z" />
  </symbol>

   <!-- A grid to materialize our symbol positioning -->

  <!-- All instances of our symbol -->

        <use href="#cube" x="0"  y="0" class="cube-dotted" />


    </svg>
</body>
</html>
 
Y

yeyven

Joined
Sep 7, 2022
Messages
2
Reaction score
0
I actually managed to get the following working with defs and use:

HTML: 
<!DOCTYPE html>
<html>
<head>
    <title>TEST #6 : Animated Line Drawing</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="200 300 300 500">
        <defs>
            <g id="treehouse">
            <path fill="transparent" d="M319.4,362.3c-4.3-2.5-11.3,1.4-15.5,8.8l-7.6,13.2c-2.8,5.5-2.4,12.1,1.2,17.2l0.3,0.3
            c3.5,5.1,8.3,9.7,9.8,11.4c0.9,0.9,1.6,2.2,2,3.5c1.3,4.6-1.4,9.4-6,10.6c-4.6,1.3-9.4-1.4-10.6-6c-0.3-1.2-0.4-2.4-0.3-3.4
            c0.3-2-0.4-5-3.1-8s-8.3,2.8-10.1,8.6l-0.1,0.3c-1.8,5.9-2.9,11-2.6,11.5c0.3,0.3,0.4,0.7,0.5,0.9c2.6,5,0.8,10.9-3.9,13.4
            c-4.7,2.5-10.6,0.8-13.2-4.1c-2.5-4.7-0.8-10.6,4.1-13.2c0.3-0.1,0.4-0.3,0.7-0.3c0.4-0.1,1.4-2.6,2.2-5.6c0.9-2.9,1.6-5.4,1.6-5.4
            c0.1-0.3,0.1-0.7,0.3-0.9l4.8-17.2l-5.1,10.6c-0.7-2-1.6-2.1-3.8-0.5c-1.3,0.9-3.5,2.9-4.6,3.5c-2,1.4-3.7,4.2-4.6,6
            c-0.5,1-1.3,2-2.2,2.8c-3.7,3-9,2.5-12.1-1.3c-3-3.7-2.5-9,1.3-12.1c1-0.9,2.4-1.4,3.5-1.7c2.2-0.5,9.6-5,14-8.1
            c0.8-0.5,1.4-1,2-1.6l11.8-9l-10.3,5.6c0,0-1-0.1-2.4,0c-3.8,0.4-7.7,0.9-8.4,1.8c-0.4,0.5-0.9,1-1.6,1.4c-3.4,2.5-8.3,1.7-10.7-1.7
            c-2.5-3.4-1.7-8.3,1.7-10.7c1.4-1,3-1.4,4.7-1.4c2.8,0.1,10.1,1.6,16.1,0.5l1.6-0.3c6-1,13.4-6.4,16.2-11.8c0,0,2.9-5,6.3-11.1
            c3.5-6.2,3.3-12.8-0.5-15.1l-6.9-3.9c-3.5-2-9.2-2-12.7,0l-47.7,26.9c-3.4,2-6.3,6.9-6.3,10.9v52.5c0,4.1,2.9,8.9,6.3,10.9
            l47.7,26.9c3.5,2,9.2,2,12.7,0l47.6-26.9c3.5-2,6.3-6.8,6.3-10.9v-52.5c0-4.1-2.9-8.9-6.3-10.9C327.2,366.8,323.7,364.8,319.4,362.3
            z" />
        </g>
        </defs>

        <use xlink:href="#treehouse" class="cube-draw" x="0" y="0" />
        <use xlink:href="#treehouse" class="cube-dotted" x="150" y="0" />

    </svg>
</body>
</html>

CSS: 
@keyframes offset {
    60% {
        stroke-opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes fill-it {
    100% {
        fill: red;
        fill-opacity: 0.5;
    }
}

/* --------------------------
  SVG Styles
--------------------------- */

.svg {
    display: block;
}

.cube-dotted {
    stroke: red;
    stroke-linecap: round;

    stroke-width: 2;
    stroke-dasharray: 0.2 3;
    stroke-dashoffset: 80;
    animation: offset 2.5s linear forwards;
}

.cube-draw {
    stroke: red;
    stroke-width: 2;
    stroke-dasharray: 810;
    stroke-dashoffset: 810;
    animation: offset 2.3s linear forwards, fill-it .8s 5s forwards;
}
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Responsive width SVG image with fixed height rectangle at left and bottom - see my pen 0
comp.lang.c Answers to Frequently Asked Questions (FAQ List) 15
comp.lang.vhdl FAQ part 1 of 4: general 0
comp.lang.c Answers to Frequently Asked Questions (FAQ List) 1

Members online

No members online now.
Total: 100 (members: 0, guests: 100)
Robots: 65

Forum statistics

Threads
473,979
Messages
2,570,185
Members
46,722
Latest member
NelsonHeil

Latest Threads

Top