SVG and CSS Sakura


by Jeremy Caudle
notes

Today I wanted to play with using a flower petal made in SVG and see if I could reuse the original SVG multiple times throught my HTML and manipulate it with CSS. I'm glad I was able to sort out the rotation point with transform-origin. Firefox's inspector really came in handy when sorting where to place it.

View the code:

HTML and JS 
<div class="codedoodle-block">
<!-- Original petal -->
        <svg x="0px" y="0px" width="0" height="0">
<symbol id="petal" height="98" width="85" >
    <path d="M42.501,11.25c0,0-2.75-14.5-17.75-6.75S2.501,44.25,3.251,53s11.75,22.75,13.75,27
        s21,15.75,26,15.75S65.751,82,69.251,77.5s8.25-13.5,7.5-19.25c1.75-8.75,7.5-18.75-0.25-32.25c-8.25-9-10.5-11.25-11.75-14.25
        s-13-6.75-16-6.75S42.251,8.25,42.501,11.25z"/>
</symbol>
</svg>

<!-- Flower petal -->
<div class="flower">
    <svg class="petal petal-1">
        <use xlink:href="#petal" />
    </svg>

    <svg class="petal petal-2">
        <use xlink:href="#petal" />
    </svg>

    <svg class="petal petal-3">
        <use xlink:href="#petal" />
    </svg>

    <svg class="petal petal-4">
        <use xlink:href="#petal" />
    </svg>

    <svg class="petal petal-5">
        <use xlink:href="#petal" />
    </svg>
</div>
    </div>
CSS 
/* Code Block styles */

        div.codedoodle-block {
            margin: 3rem auto;
            width: auto;
            max-width:300px;
            height: 300px;
            background-color: transparent;
            border-radius: 50%;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            perspective: 700px;
            background-repeat: no-repeat;
            background-clip: border-box;
            animation: bgmove 5s cubic-bezier(1,0,0,1) 0s infinite alternate;   
        }

        @keyframes rotate {
            from{transform: rotate3d(.25,0,.25,0deg)}
            to{transform: rotate3d(.25,0,.25,20deg);}
        }
        
        .flower {
            height: 100%;
            width: 100%;
            border-radius: 50%;
            background-color: rgba(253, 56, 89, 0.5);
            position: relative;
            animation: rotate 7s ease-in-out 0s infinite alternate;
        }

        .petal {
            display: block;
            position: absolute;
            max-width: 85px;
            max-height: 98px;
            top: 44px;
            left: 107.5px;
            transform-origin: center 110%;
						-webkit-transform-origin: 50% 110%;
            fill:rgba(255, 192, 202, 0.9);
						stroke:rgb(253, 197, 206);
        }

        .petal-1 {
            transform: rotate(0deg);
        }

        .petal-2 {
            transform: rotate(72deg);
        }

        .petal-3 {
            transform: rotate(144deg);
        }

        .petal-4 {
            transform: rotate(216deg);
        }
        
        .petal-5 {
            transform: rotate(288deg);
        }

Tags