SVG and CSS Sakura

by Jeremy Caudle

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:

<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

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

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

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

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

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

        div.codedoodle-block {
            margin: 3rem auto;
            width: auto;
            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);