Manipulating SVG With CSS

Developer
Kyle Foster
Size
3,640 Kb
Views
30,360
  1. Manipulating SVG With CSS Previews
  2. Manipulating SVG With CSS HTML Codes
  3. Manipulating SVG With CSS CSS Codes
  4. Manipulating SVG With CSS JS Codes

How do I make an manipulating svg with css?

An expedition into what SVG properties can be manipulated with CSS. Feel free to fork and continue the experiment. If you'd like to see my video on the subject, hit up my YouTube channel: http://youtu.be/FW1bwgOhQNo. What is a manipulating svg with css? How do you make a manipulating svg with css? This script and codes were developed by Kyle Foster on 04 September 2022, Sunday.

Manipulating SVG With CSS Previews
IQ Test

Manipulating SVG With CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Manipulating SVG With CSS</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* Global */
div.container { display: inline-block; margin: 10px; text-align: center; font: 12px Avenir, 'Avenir Next', sans-serif;
}
div.container p { margin: 0 0 5px 0; }
svg, rect { transition: .5s all; }
/* Width & Height */
svg.width-height { width: 100px; height: 100px;
}
svg.width-height:hover { width: 80px; height: 80px;
}
/* Background */
svg.background { background: red; }
svg.background { background: linear-gradient(to bottom, blue 0%, red 100%); }
/* Filter */
svg.filter { backface-visibility: hidden; -webkit-filter: drop-shadow(13px 13px green);
}
svg.filter:hover { -webkit-filter: drop-shadow(9px 9px yellow); }
/* Fill */
svg.fill rect { fill: blue; }
svg.fill:hover rect { fill: green; }
/* Stroke */
svg.stroke rect { stroke: red; stroke-width: 5px;
}
svg.stroke:hover rect { stroke: yellow; stroke-width: 8px;
}
/* Opacity */
svg.opacity rect { opacity: .5; }
svg.opacity:hover rect { opacity: 1; }
/* Transform */
svg.transform rect { transform: scale(1.2) rotate(0deg) translateX(0); transform-origin: center;
}
svg.transform:hover rect { transform: scale(.8) rotate(200deg) translateX(20px); }
/* Keyframes */
@keyframes color { 0%, 10% { fill: blue; } 50% { fill: green; }
}
svg.keyframes rect { fill: blue; }
svg.keyframes:hover rect { animation: color 1s infinite; }
/* Gradient */
svg.gradient rect { fill: url(#gradient); }
#gradient stop { transition: .5s all; }
svg.gradient:hover #gradient stop:first-child { stop-color: blue; }
svg.gradient:hover #gradient stop:last-child { stop-color: green; }
/* Display */
svg.display:hover rect { display: none;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!-- Default -->
<div class="container"> <p>Default</p> <svg width="100" height="100" viewBox="0 0 100 100"> <rect width="50" height="50" x="25" y="25" /> </svg>
</div>
<!-- Width and Height -->
<div class="container"> <p>Width/Height</p> <svg class="width-height" width="100" height="100" viewBox="0 0 100 100"> <rect width="50" height="50" x="25" y="25" /> </svg>
</div>
<!-- Background -->
<div class="container"> <p>Background</p> <svg class="background" width="100" height="100" viewBox="0 0 100 100"> <rect width="50" height="50" x="25" y="25" /> </svg>
</div>
<!-- Filter -->
<div class="container"> <p>Filter</p> <svg class="filter" width="100" height="100" viewBox="0 0 100 100"> <rect width="50" height="50" x="25" y="25" /> </svg>
</div>
<!-- Fill -->
<div class="container"> <p>Fill</p> <svg class="fill" width="100" height="100" viewBox="0 0 100 100"> <rect width="50" height="50" x="25" y="25" /> </svg>
</div>
<!-- Stroke -->
<div class="container"> <p>Stroke</p> <svg class="stroke" width="100" height="100" viewBox="0 0 100 100"> <rect width="50" height="50" x="25" y="25" /> </svg>
</div>
<!-- Opacity -->
<div class="container"> <p>Opacity</p> <svg class="opacity" width="100" height="100" viewBox="0 0 100 100"> <rect width="50" height="50" x="25" y="25" /> </svg>
</div>
<!-- Transform -->
<div class="container"> <p>Transform</p> <svg class="transform" width="100" height="100" viewBox="0 0 100 100"> <rect width="50" height="50" x="25" y="25" /> </svg>
</div>
<!-- Keyframes -->
<div class="container"> <p>Keyframes</p> <svg class="keyframes" width="100" height="100" viewBox="0 0 100 100"> <rect width="50" height="50" x="25" y="25" /> </svg>
</div>
<!-- Gradient -->
<div class="container"> <p>Gradient</p> <svg class="gradient" width="100" height="100" viewBox="0 0 100 100"> <defs> <linearGradient id="gradient"> <stop offset="5%" stop-color="#F60" /> <stop offset="95%" stop-color="#FF6" /> </linearGradient> </defs> <rect width="50" height="50" x="25" y="25" /> </svg>
</div>
<!-- Display -->
<div class="container"> <p>Display</p> <svg class="display" width="100" height="100" viewBox="0 0 100 100"> <rect width="50" height="50" x="25" y="25" /> </svg>
</div> <script src="js/index.js"></script>
</body>
</html>

Manipulating SVG With CSS - Script Codes CSS Codes

/* Global */
div.container { display: inline-block; margin: 10px; text-align: center; font: 12px Avenir, 'Avenir Next', sans-serif;
}
div.container p { margin: 0 0 5px 0; }
svg, rect { transition: .5s all; }
/* Width & Height */
svg.width-height { width: 100px; height: 100px;
}
svg.width-height:hover { width: 80px; height: 80px;
}
/* Background */
svg.background { background: red; }
svg.background { background: linear-gradient(to bottom, blue 0%, red 100%); }
/* Filter */
svg.filter { backface-visibility: hidden; -webkit-filter: drop-shadow(13px 13px green);
}
svg.filter:hover { -webkit-filter: drop-shadow(9px 9px yellow); }
/* Fill */
svg.fill rect { fill: blue; }
svg.fill:hover rect { fill: green; }
/* Stroke */
svg.stroke rect { stroke: red; stroke-width: 5px;
}
svg.stroke:hover rect { stroke: yellow; stroke-width: 8px;
}
/* Opacity */
svg.opacity rect { opacity: .5; }
svg.opacity:hover rect { opacity: 1; }
/* Transform */
svg.transform rect { transform: scale(1.2) rotate(0deg) translateX(0); transform-origin: center;
}
svg.transform:hover rect { transform: scale(.8) rotate(200deg) translateX(20px); }
/* Keyframes */
@keyframes color { 0%, 10% { fill: blue; } 50% { fill: green; }
}
svg.keyframes rect { fill: blue; }
svg.keyframes:hover rect { animation: color 1s infinite; }
/* Gradient */
svg.gradient rect { fill: url(#gradient); }
#gradient stop { transition: .5s all; }
svg.gradient:hover #gradient stop:first-child { stop-color: blue; }
svg.gradient:hover #gradient stop:last-child { stop-color: green; }
/* Display */
svg.display:hover rect { display: none;
}

Manipulating SVG With CSS - Script Codes JS Codes

/* CAN DECLARE: 1. width & height on SVG 2. background on SVG (including gradients) 3. filters (drop-shadow) on SVG 4. fill 5. stroke 6. stroke-width 7. opacity 8. transforms 9. transitions 10. keyframe animations 11. linear & radial gradients 12. display: none
** CAN TRANSITION: 1. width & height 2. fill 3. opacity 4. stroke 5. stroke-width 6. transforms (scale, translate, rotate) 7. keyframe animations 8. linear & radial Gradients (stop-color)
** CANNOT DECLARE: 1. z-index 2. position 3. visibility 4. border-radius
** SVG GRADIENT SYNTAX:
**
<defs> <linearGradient id="gradient"> <stop offset="5%" stop-color="#F60" /> <stop offset="95%" stop-color="#FF6" /> </linearGradient>
</defs>
**
*/
Manipulating SVG With CSS - Script Codes
Manipulating SVG With CSS - Script Codes
Home Page Home
Developer Kyle Foster
Username hkfoster
Uploaded September 04, 2022
Rating 4
Size 3,640 Kb
Views 30,360
Do you need developer help for Manipulating SVG With CSS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kyle Foster (hkfoster) Script Codes
Name
SVG Circular Scroll Progress Bar
Colored Single-Element Sections
Askew - A Subtle Parallax Banner Plugin
Vanilla Flavored Unorphanize
Messing Around with CSS3 Shadows
Slimslider.js
Vanilla Flavored Hypher
Vanilla FlowType.js
Cattywompus - A Subtle Parallax Banner Plugin
Freemason.js
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!