svg花朵着色动画效果-html代码-BFW代码库

代码语言：html
所属分类：动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body{
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background-image: url(http://repo.bfw.wiki/bfwrepo/image/5e2e42d898f65.png);
  background-blend-mode: multiply;
  background-color: #e2d8d0;
  background-repeat: repeat;
  background-size: 800px;
}


svg {
  height: 80vh;
  width: 100%;
  margin-top: 10vh;
  opacity: 0.9
}

#illustration {
   animation: squigglevision 0.5s infinite alternate;
}

@keyframes squigglevision {
  0% {
    filter: url('#sketch-0');
  }
  25% {
    filter: url('#sketch-1');
  }
  50% {
    filter: url('#sketch-2');
  }
  75% {
    filter: url('#sketch-3');
  }
  100% {
    filter: url('#sketch-4');
  }
}

.path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: paint 1s ease-in-out 1s forwards;
}

.path:nth-of-type(2) {
  animation-delay: 2s;
}

@keyframes paint {
  from {
    stroke-dashoffset: 1; 
  }
  to {
    stroke-dashoffset: 0;
  }
}
</style>

</head>
<body translate="no">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 397.332 500">
<title>Artboard 1</title>
<pattern id="watercolour" patternUnits="userSpaceOnUse" width="100%" height="100%">
<image xlink:href="https://static.vecteezy.com/system/resources/previews/000/204/451/non_2x/vector-watercolour-texture.jpg" width="100%" height="100%" />
</pattern>
<defs>
<mask id="mask1">
<path id="mask1" d="M169.913,113.225c.545-.5.584-.5.952.082,1.246,1.431,2.4-3.082,4.068-1.545,1.2.44,2.7-.725,4.318-1.038,1.054,1.215,1.917.8,2.181-.872a143.905,143.905,0,0,1,22.468.275c1.466,2.353,3.923-.433,5.382,1.04a16.925,16.925,0,0,1,2.808,13.059c-1.674,2.39-.711,4.146-3.028,5.4,1.965,2.086-.556,2.463-1.816,3.279-2.205.336-5.629,2.373-2.841,5.387,2.281-.4,4.046-1.919,5.331.959,2.426.237,7.911,2.826,6.688,5.107,3.1-.909,2.753.71,5.329,2.428-2.5,2.208-5.736,2.61-8.235,4.892-.659.306-1.828-2.45-2.413-1.345.829,6.2,7.955,3.868,7.593,10.172.406,3.487-4.639,2.383-6.319,4.266-2,2.585-.944,6.335-4.189,7.925-.809.53-1.016-.042-1.5-.67-.669,2.622-1.883.42-2.9-.393-5.984,4.579-12.5,8.925-20.273,4.487-3.3-.833-5.911,2.285-7.789,2.351,1.129-1.989-8.222,3.713-9.93,3.567-7.308,3.006-15.243,1.955-22.491.358-3.1-.076-1.067-5.7-3.83-5.333,3.977-3.516-3.327-4.478-5.294-4.544-2.555-.861-4.185-.2-6.662-2.268.488-1.237,1.521-1.432.018-2.231-1.369,5.142-3.352-2.75-5.775.214-1.222.909-.285-2.447-1.771-.853-.088-1.636,1.244-2.246-.461-3.159,1.317-.626-.1-1.99.937-3.092.486-1.131-.789-.158-1.163-1.548-1.815,2.689.6-3.172,1.257-.256,1.321.453.012-1.129,1.163-1.272.913-.808,1.72-1.8,2.682-2.528,2.445-2.9-5.811-1.43-5.028-5.25-.627-2.654-1.378-1.633.2-4.894-1.889-6.415,4.891-4.242,6.036-12.3,1.1-2.211,2.119-1.587,3.641-.48-.087-1.926,1.7.573,2.542-.377a5.475,5.475,0,0,0,.485-4.17c.862-2.53,1.393-.821,1.342-4.184,1.535-.8,2.462-2.258,1.18-4.176,2-.7,3.136-.9,3.17-3.191a6.026,6.026,0,0,0,4.428-2.013c1.025-.567,2.6,1.24,2.88-.754,3.38-1.825,8.483-.779,12.5-.581a17.933,17.933,0,0,0,5.333-.068c1.187.218,1.332,3.08,2.924,1.942,1.521.535,5.235-3.832,3.03,0C169.933,114.953,170.392,114.251,169.913,113.225Zm35.559,59.642c.73-.157.812-1.226.559-1.781C205.605,171.249,205.739,172.087,205.472,172.867ZM214,150.6c-.269-.307-.458-.407-.618-.022C213.377,151.141,213.8,150.973,214,150.6Zm-91.5,8.062c-.063.17-.094.369.084.343C122.7,158.822,122.736,158.716,122.5,158.663Zm3.309-7.559c-.2-.192-.339-.1-.438.148C125.565,151.4,125.722,151.4,125.81,151.1Zm.47,3.3c.081.045.184.136.187-.016C126.385,154.336,126.294,154.247,126.28,154.407Zm2.57,13.031c-.081-.045-.184-.134-.189.017C128.744,167.509,128.834,167.6,128.85,167.438Zm-1.575-15.386c.071-.021.082-.052.036-.131C127.239,151.942,127.229,151.974,127.275,152.052Zm34.93-38.448c-.051-.043-.1-.026-.089.049C162.157,113.709,162.2,113.679,162.205,113.6Zm-38.442,43.537c-.006.091,0,.1.059.052Zm1.219-.773c-.045.08-.021.07.041.066Zm86.962,7.622c-.015-.088-.063-.123-.107-.054C211.834,164.022,211.89,164.041,211.944,163.99Zm-89.773-13.352c.006-.092,0-.1-.06-.052Zm-.025,12.791c-.058.056-.071.069.009.1Z" fill="#fff" />
</mask>
<mask id="mask2">
<path d="M231.058,286.284c6.023,4.626.479-1.809-2.807-3.522-1.581-1.19-5.3-2.335-5.984-3.169,1.4.323,4.246.709,5.7,2.018,5.669.6,10.955,8.717,7.635,13.731-1.2,1.414-12.7,1.146-5.217,2.153.985,3.056,3.633-.447,4.829.189-.066,1.651-4.56,1.618-2.352,2.68-.485.046.147-.046.258.226-1.265.959-2.587,1.473.1,2.719,1.35.567.774,1.812-.506,1.277,1.056,2.062.812,4.116,3.325,4.4-6.906,3.334-15.526-2.795-22.314-2.127-1.581-3.63-23.153-1.579-19.484-4.637.224-1.508-1.3-.217-2.111-.576-1-1.247,1.267-1.169,2.142-.939-5.611-2.222,1.3-3.027-5.93-5.065-2.119-1.745,2.033-6.618,3.4-3.118-.195-.756.964-2.6-.684-2.518-.553-.378-.892-1.045-.073-1.465.1-.557-.8-1.7.171-1.846,2.933-.39,2.44-2.348,5.263-1.871-.472-.775-2.927-1.271-1.875-2.773.29-1.172-2.871-1.51.22-2.036-6.666.284-11.212-6.91-4.557-5.782.428.541,1.353.181,1.915.627l-.01-.014c.729.546,1.951.343,2.818.546.074.774.483.772,1.035.5,3.558,1.81,9.3.793,11.712,4.82-.08.251-.294.229-.518.22-1.157.264.732.518-.079,1.268.147.991,1.606-.727,2.326-.142.9-.524,3.2-.315,3.731.338.206-.805,1.206.551,1.695-.416.915,2.605,1.188-1.188,1.743,1.391.209-1.048,3.109.586,4.262.176,3.307-.06,6.7,1.192,9.608,2.5.2.368.38-.032.623.237C230.69,286.8,231.563,286.809,231.058,286.284Zm-35.222-3.5c.349.454-.3-.429-.769-.256C194.342,282.8,195.507,282.824,195.836,282.784Zm-5.594-.4.1-.021C189.527,281.855,189.746,283.256,190.242,282.379Zm3.617.565c.532-.9-.458-1.524-1.149-.725Zm32.311,2.169c-.6-.61-.814-.667-1.833-.5A2.886,2.886,0,0,0,226.17,285.113ZM184.033,291.1c.372-.176.419-.517-.067-.579C183.542,290.576,183.9,290.858,184.033,291.1Zm18.93-12.125c-.23.135-.305.274-.05.4C203.286,279.44,203.225,279.112,202.963,278.979Zm19.783,5.336c.222.015.543.227.531-.057C223.04,284.185,222.911,284.02,222.746,284.315ZM185.88,271.33c.093.141.163.127.276.019C186.057,271.223,185.961,271.152,185.88,271.33Zm3.427,10.438c-.135.157-.381.2-.2.381C189.288,282.03,189.39,282.032,189.307,281.768Zm12.032-2.4c-.025.147.064.164.19.1C201.584,279.337,201.461,279.331,201.339,279.368Zm-10.572,3.518c.1.05.112,0,.114-.085C190.8,282.794,190.755,282.8,190.767,282.886Zm31.686-5.95c.027-.065.093-.165-.018-.18C222.293,276.827,222.326,276.882,222.453,276.936ZM227,285.448c-.139.046-.016.1.07.137C227.223,285.556,227.072,285.493,227,285.448Zm-21.092-6.736c.037.057.069.061.12.017C205.993,278.673,205.961,278.669,205.91,278.712ZM194.3,283.534l.07-.007C194.336,283.49,194.322,283.479,194.3,283.534Zm5.861-4.921c0,.074.044.112.107.066C200.293,278.609,200.235,278.583,200.164,278.613Zm-3.338,4.374c-.07-.025-.1-.026-.1.056C196.792,283.067,196.825,283.069,196.826,282.987Z" fill="#fff" />
<path data-name="mask2" d="M237.786,269.033a6.762,6.762,0,0,1,.3,2.094.927.927,0,0,0,.305.636,5.321,5.321,0,0,0,1.074.838,9.272,9.272,0,0,1,2.529,1.974,3.577,3.577,0,0,0,.9.536c0,.006.092.06.108.131a1.4,1.4,0,0,0,1.016,1.115c.884.3,1.114.931.849,1.895-.01.035-.055.061-.084.092s-.069.056-.107.061c-.35.049-.725-.121-1.031.256a1.254,1.254,0,0,0-.164,1.073,16.412,16.412,0,0,1-.405,4.231,1.455,1.455,0,0,1-.459.724,5.93,5.93,0,0,1-.817.587.71.71,0,0,0-.117.215c-.13.987-.214,1.062-1.132,1.061-.541,0-1.083,0-1.622.045a1.67,1.67,0,0,1-1.673-.576,3.08,3.08,0,0,0-.552-.466l.435-.529c-.417-.529-.824-1.046-1.279-1.622a2.621,2.621,0,0,1,.3-.609c.46-.543.954-1.057,1.431-1.586a3.69,3.69,0,0,0,.565-.673,5.514,5.514,0,0,1,1.923-1.934.876.876,0,0,0-.081-1.588,1.994,1.994,0,0,0-1.651-.335,6.025,6.025,0,0,1-.993.108c-.292-.424.264-.542.324-.881-.066-.065-.137-.2-.233-.22a3.838,3.838,0,0,1-1.819-.737c-.095-.081-.24-.123-.3-.221-.556-.929-1.551-.989-2.429-1.283a4.267,4.267,0,0,0-1.867,2.061c.5.364,1.024.7,1.04,1.489-.973-.1-1.446-.947-2.255-1.229a11.749,11.749,0,0,1-2.257-1.424c.557,1.2.557,1.2.524,1.783h.017a.933.933,0,0,0-1.1.134c-.295-.2-.48-.577-.912-.457.578-.661.095-1.282.043-1.96l-1.062.515c.243.406.776.6.651,1.143a.374.374,0,0,0-.083-.05.246.246,0,0,0-.077,0l.16.034.4.317-.6.525a1.332,1.332,0,0,0,.939.769c.766.145.943.676,1.02,1.4l-.77.123c0-.12,0-.241-.014-.361-.015-.187.044-.413-.22-.482a.127.127,0,0,0-.1.037.461.461,0,0,0,.026.645c.069.08.211.1.319.142l.041.809c-.483.171-.4-.251-.638-.445-.656-.021-1.4-.069-2.137-.061a3.165,3.165,0,0,1-1.175-.289c0-.258,0-.463,0-.678-.455-.459-.928-.082-1.44,0a4.886,4.886,0,0,0-2.99-1.17l-.328-1.072c-.2-.094-.429-.19-.647-.3s-.422-.237-.626-.354a2.969,2.969,0,0,0-.362.193c-.681.51-.909.5-1.477-.062a1.8,1.8,0,0,1-.669-1.277l-1.592-.956c-.114.181-.24.383-.367.584-.472-.183-.731.337-1.137.356-.114,0-.3-.037-.335-.112-.219-.486-.9-.556-1-1.145-.018-.1-.163-.18-.249-.269-.021-.07-.038-.141-.064-.208a.339.339,0,0,0-.065-.084c0,.046-.026.105-.006.135a.956.956,0,0,0,.152.153c-.158.026-.339.113-.47.065a4,4,0,0,1-.633-.379.378.378,0,0,0-.551.068.769.769,0,0,0-.145.562,6.356,6.356,0,0,0,.517.938c-.154.291-.521.322-.542.687a.5.5,0,0,1-.483.492c-.3.011-.376-.217-.479-.466a4.875,4.875,0,0,0-.569-.933c-.056-.078-.212-.084-.375-.142-.085.248-.16.468-.255.747l-.765-.629c.067-.145.234-.338.2-.488a.726.726,0,0,0-.393-.416,1.934,1.934,0,0,0-.608-.07h.02c-.473-.258-.943-.522-1.42-.772-.456-.239-.85-.487-.833-1.116.008-.273-.292-.382-.568-.273-.257.1-.507.224-.788.349l.548.825c-.318-.082-.512-.074-.611-.167a15.829,15.829,0,0,1-1.391-1.411,13.836,13.836,0,0,1-1.039-1.54.717.717,0,0,1,.12-.82l.6.492a2.33,2.33,0,0,0,.178.7c.26.407.583.773.884,1.16a1.426,1.426,0,0,0,.672-.695,7.3,7.3,0,0,1-.907-.45,9.773,9.773,0,0,1-.843-.71.582.582,0,0,0-.583-.481c-.209-.131-.427-.249-.625-.4-.152-.113-.017-.635-.421-.362-.29.2.035.422.1.641.159.507.267,1.032.412,1.613-.186.055-.363.17-.476.127-.3-.116-.72-.232-.827-.471a2.33,2.33,0,0,0-1.575-1.3,1.3,1.3,0,0,1-.435-.239c-.659-.558-1.285-1.159-1.97-1.683a4.921,4.921,0,0,0-2.011-1.177,1.616,1.616,0,0,1-.609-.373c-.26-.2-.485-.453-.752-.645a.814.814,0,0,0-.47-.122.409.409,0,0,0-.291.194.523.523,0,0,0,.015.345.38.38,0,0,0,.168.176c1.515.94,2.795,2.212,4.353,3.094a1.634,1.634,0,0,1,.653.554,1.719,1.719,0,0,0,1.464.9c.244.316.393.663.655.813.437.25.432.668.549,1.071a3.736,3.736,0,0,1,.947.194,2.491,2.491,0,0,1,.751.643.714.714,0,0,1,.152.551c-.037.16-.248.281-.4.435-.443-.417-.826-.787-1.221-1.145a5.9,5.9,0,0,0-.765-.633,22.745,22.745,0,0,1-2.112-1.31,18.993,18.993,0,0,0-1.962-1.511,23.5,23.5,0,0,1-2.166-1.671,2.048,2.048,0,0,0-1.2-.609.975.975,0,0,1-.775-.548,2.943,2.943,0,0,0-.686-.705c-.526-.4-1.08-.755-1.623-1.129a1.689,1.689,0,0,1-.2-.137c-2.123-1.987-1.888-1.993-4.366-3.333a4.429,4.429,0,0,1-1.54-1.235,4.286,4.286,0,0,0-.83-.722c-.128-.1-.286-.166-.425-.258-.97-.639-.98-.655-1.363-1.851a2.069,2.069,0,0,0-1.566-.577.768.768,0,0,1-.919-.647,2.185,2.185,0,0,0-1.433-1.6,1.713,1.713,0,0,1-.666-.523,3.465,3.465,0,0,0-.886-.846,2.2,2.2,0,0,1-.723-.828,3.571,3.571,0,0,0-1.809-1.652,6.331,6.331,0,0,1-1.924-1.5,41.246,41.246,0,0,0-4.5-3.9,3.346,3.346,0,0,0-.541-.306,7.046,7.046,0,0,1-1.886-1.41,4.425,4.425,0,0,0-1.257-1,1.776,1.776,0,0,1-.733-.653,25.7,25.7,0,0,0-2.994-3.327c-.581-.649-1.2-1.264-1.788-1.906-.47-.515-.487-.738-.1-1.321a4.05,4.05,0,0,1,.693-.888,3.6,3.6,0,0,0,1.215-2.517,17.18,17.18,0,0,1,.667-2.5l.768-.3a1.583,1.583,0,0,0-.133-1.195c.265-.4.546-.806.817-1.222.339-.52.909-.543,1.5-.7,0-.439,0-.887.008-1.4a2.125,2.125,0,0,0,.931-2.138.925.925,0,0,1,.837-1.062,8.686,8.686,0,0,1,1.016-.065l1.932-1.831,1.764-.091c1.109,1.225,1.223,1.255,3.008.8-.326-.391-.513-.881-1.113-.908-.035-.273-.06-.548-.109-.82-.036-.2-.123-.4-.149-.6-.058-.46.205-.752.651-.69.74.1,1.473.259,2.212.367.61.089,1.225.142,1.965.225.065.177.159.486.288.78.309.707.787.784,1.343.253.3-.288.635-.543.952-.815.126-.109.33-.212.355-.342.218-1.171,1.411-1.6,1.931-2.648a5.371,5.371,0,0,0-.4-.664q-1.038-1.319-2.107-2.612c-.5-.606-1.038-1.185-1.554-1.78-.3-.345-.6-.687-.873-1.055a.848.848,0,0,1-.2-.559,1.673,1.673,0,0,0-.348-1.167c-.541-.932-1.088-1.86-1.631-2.791a1.379,1.379,0,0,1-.17-.333,6.266,6.266,0,0,0-1.208-2.147,11.1,11.1,0,0,0-2.148-2.228,8.2,8.2,0,0,1-.736-.672c-.557-.557-1.1-1.127-1.659-1.684a2.135,2.135,0,0,1-.737-1.294,2.931,2.931,0,0,1,2.122.483c.312.206.59.463.905.661a1.5,1.5,0,0,0,1.51.285c.293-.123.711.06,1.132.111a1.65,1.65,0,0,0,.07-1.647,3.859,3.859,0,0,1-.155-2.805,2.289,2.289,0,0,1,.251-.389c.167.133.378.219.444.37a5.942,5.942,0,0,1,.384,1.185,2.362,2.362,0,0,0,.68,1.3,2.574,2.574,0,0,1,.91,1.976,2.006,2.006,0,0,0,.681,1.434c.852.848,1.711,1.688,2.567,2.532a.977.977,0,0,0,1.343.22c.44-.286.879-.111,1.331-.04,1.315.207,2.635.384,3.954.558a1.816,1.816,0,0,0,.518-.111,8.272,8.272,0,0,0-1.5-2.047c-1.82-2.161-3.524-4.41-5.17-6.705-.459-.641-.924-1.279-1.331-1.953a2.667,2.667,0,0,1-.049-2.855c.207-.366.4-.744.622-1.1a.654.654,0,0,1,.863-.314,4.431,4.431,0,0,1,1.071.61c.714.569,1.4,1.172,2.082,1.781,1.207,1.079,2.411,2.162,3.6,3.264,1.611,1.5,3.2,3.017,4.808,4.515.638.593,1.313,1.147,1.964,1.727,1.209,1.077,2.462,2.11,3.6,3.255a7.768,7.768,0,0,0,4.9,2.185,22.355,22.355,0,0,1,4.546.79,1.4,1.4,0,0,0,.616.07,1.439,1.439,0,0,1,1.059.28,3.8,3.8,0,0,0,1.508.546,3.9,3.9,0,0,1,1.6.651,5.454,5.454,0,0,0,3.4.984,17.45,17.45,0,0,1,5.331.413c1.948.574,4,.768,5.882,1.6a15.735,15.735,0,0,1,2.307,1.223,13.228,13.228,0,0,1,5.019,5.407c.174.375.439.706.649,1.064a2.1,2.1,0,0,0,.9.821,4.05,4.05,0,0,1,1.487,1.106,1.152,1.152,0,0,0,.987.443c.668,0,1.339.038,2-.02a26.435,26.435,0,0,1,5.117.259c.166.017.329.055.494.074.743.087,1.59-.014,2.166.475.647.549,1.465.288,2.1.65a9.665,9.665,0,0,1,3.628,2.964,2.7,2.7,0,0,1,.408.765c.117.48.087,1.005.677,1.23.107.041.171.28.192.436a6.006,6.006,0,0,1-.338,3.328c-.486,1.111-.872,2.267-1.293,3.406a1.614,1.614,0,0,0,.125,1.448c.281.46.6.9.919,1.332q.858,1.146,1.743,2.268a3.266,3.266,0,0,0,2.142,1.573.993.993,0,0,1,.816.692c.275.7.519,1.407.8,2.1a4.373,4.373,0,0,0,.466.862c.351.5.736.976,1.137,1.5l.569-.165a5.743,5.743,0,0,0,1.535,2.31l.422-.408a2,2,0,0,1,1.155,1.236,3.139,3.139,0,0,0,1.113,1.455c1.549,1.25,3.082,2.52,4.62,3.784a4.722,4.722,0,0,1,1.611,1.862,1.072,1.072,0,0,0,.3.4,10.267,10.267,0,0,0,3.025,2.152,11.753,11.753,0,0,1,1.35.7,9.62,9.62,0,0,0,.387,1.14,7.073,7.073,0,0,0,.631.9,2.533,2.533,0,0,1-.7.1c-.445-.091-.874-.265-1.321-.342a.76.76,0,0,0-.551.194.517.517,0,0,0-.034.69,2.593,2.593,0,0,0,.248.279c.581.689.6.7.147,1.5a3.324,3.324,0,0,0-.338,1.2.625.625,0,0,1-.658.629c-.373.04-.751.035-1.126.056a1.376,1.376,0,0,0-1.293.626.834.834,0,0,1-.272.259.83.83,0,0,0-.275,1.2,3.086,3.086,0,0,1,.149.542,4.553,4.553,0,0,0-2.43,1.652c.182.247.633-.024.657.5l-.908.384c.285.293.521.56.782.8s.561.468.833.692c-.561.867-1.339,1.076-2.022.591-.167-.119-.282-.318-.458-.416a.843.843,0,0,0-.576-.139,4.338,4.338,0,0,1-2.533.007c-.311.3-.138.526.007.711a1.025,1.025,0,0,1,.275,1.025,1.055,1.055,0,0,0,.139.7,2.035,2.035,0,0,1,.254,1.68,1.042,1.042,0,0,0,.107.843c.141.282.254.579.4.925a3.175,3.175,0,0,1-2.043-1.05,1.422,1.422,0,0,1-1.763-.693l-1.146.092c.285.261.459.414.625.575a.638.638,0,0,1,.149.694c-.088.28-.314.35-.584.386a3.634,3.634,0,0,1-2.287-.462c-.944-.52-1.867-1.08-2.814-1.6a4.772,4.772,0,0,0-1.962-.755,1.8,1.8,0,0,1-.792-.328,6.678,6.678,0,0,0-1.348-.623,6.319,6.319,0,0,1-1.488-.829c-.158-.113-.206-.439-.221-.675a.946.946,0,0,0-.461-.829,1.234,1.234,0,0,1-.392-.3c-.459-.664-1-.675-1.743-.42a2.063,2.063,0,0,1-1.979-.127c-.734-.524-.762-.482-1.466.146-.156.14-.324.268-.486.4-.073.021-.148.036-.219.063a.382.382,0,0,0-.087.071c.049,0,.111.032.143.011A.99.99,0,0,0,237.786,269.033Zm4.6,9.715c.359-.083.76-.106.849-.65a3.668,3.668,0,0,0-1.084-.837,6.533,6.533,0,0,1-.112.7,5.845,5.845,0,0,1-.253.616l.62.........完整代码请登录后点击上方下载按钮下载查看